/* CELLA hosted platform portal.
   The design tokens are the SAME ones the product uses (src\webui\css\app.css)
   so the signup site, the admin panel and the app itself read as one system.
   Light is the default; dark is opt-in and applied before first paint. */

:root, :root[data-theme="light"] {
  --bg-page: #F1F3F7;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #F7F8FB;
  --bg-header: #1F2937;
  --text-main: #1F2937;
  --text-muted: #6B7280;
  --border: #E5E7EB;
  --border-strong: #D3D8E0;
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-soft: #EAF0FE;
  --success: #16A34A;
  --success-soft: #E7F6EC;
  --warning: #D97706;
  --warning-soft: #FCF0DD;
  --danger: #DC2626;
  --danger-soft: #FBE7E7;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.10);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.10);
  --shadow-lg: 0 12px 32px rgba(16,24,40,0.16);
}
:root[data-theme="dark"] {
  --bg-page: #12151c;
  --bg-surface: #1b1f28;
  --bg-surface-2: #222734;
  --bg-header: #0d1016;
  --text-main: #e7e9ee;
  --text-muted: #9aa1ad;
  --border: #2b3038;
  --border-strong: #3a4150;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-soft: #1c2740;
  --success: #22c55e;
  --success-soft: #14301f;
  --warning: #f59e0b;
  --warning-soft: #362713;
  --danger: #ef4444;
  --danger-soft: #3a1d1d;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg-page); color: var(--text-main);
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 16px; line-height: 1.5;
}
a { color: var(--accent); }

/* ---- shell ---- */
.topbar {
  background: var(--bg-header); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 60px; position: sticky; top: 0; z-index: 20;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.topbar .brand img { height: 28px; width: auto; display: block; }
.topbar .brand .pname { font-size: 1.1rem; letter-spacing: .01em; }
/* The CELLA product mark. Fixed height, natural width - never stretched. */
.topbar .brand .pmark { height: 24px; width: auto; display: block; margin-right: 2px; }
.topbar nav { display: flex; align-items: center; gap: 8px; }
.topbar nav a, .topbar nav button {
  color: #fff; text-decoration: none; font-size: .92rem; background: none;
  border: none; cursor: pointer; padding: 8px 12px; border-radius: 6px;
  font-family: inherit;
}
.topbar nav a:hover, .topbar nav button:hover { background: rgba(255,255,255,.12); }
.topbar nav a.cta { background: var(--accent); }
.topbar nav a.cta:hover { background: var(--accent-hover); }

.wrap { padding: 0 24px 56px; }
.wide { max-width: 100%; }
footer.site {
  border-top: 1px solid var(--border); padding: 24px; margin-top: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; color: var(--text-muted); font-size: .84rem;
}
footer.site img { height: 30px; width: auto; display: block; }
/* Mirrored reflection under the company mark. It is the SAME artwork flipped
   and faded, so the navy reflects along with the teal - an earlier version
   accidentally showed the dark-background variant here, where the white
   wordmark was invisible and only the teal appeared to reflect. */
.brand-reflect { position: relative; display: inline-block; }
.brand-reflect .mirror {
  transform: scaleY(-1);
  opacity: .28;
  margin-top: 2px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 72%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 72%);
  pointer-events: none;
}
/* Theme-scoped artwork. The !important is deliberate: these must beat any
   more specific layout rule that sets display on the same element (a
   .topbar .brand img rule out-specifies a bare .only-dark and would show
   BOTH variants at once). */
.only-dark { display: none !important; }
:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .only-dark { display: block !important; }

/* ---- hero ---- */
.hero {
  padding: 56px 0 40px; display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
}
.hero h1 { font-size: 2.6rem; line-height: 1.15; margin: 0 0 14px; }
.hero p.lead { font-size: 1.12rem; color: var(--text-muted); margin: 0 0 26px; max-width: 62ch; }
.hero ul { list-style: none; margin: 0 0 28px; padding: 0; }
.hero li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.hero li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--accent);
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 4%, 40% 70%);
}
.hero-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 26px;
}
.hero-card h3 { margin: 0 0 6px; }
.hero-card .muted { color: var(--text-muted); font-size: .9rem; margin: 0 0 18px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 32px; } }

/* ---- generic ---- */
.card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-sm); padding: 22px;
}
.section-title { margin: 36px 0 14px; font-size: 1.35rem; }
.muted { color: var(--text-muted); }
.grid { display: grid; gap: 16px; }
.cols { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.btn {
  display: inline-block; padding: .62rem 1.15rem; border-radius: 8px; border: none;
  background: var(--accent); color: #fff; font-size: .95rem; cursor: pointer;
  font-family: inherit; text-decoration: none; transition: background .15s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: var(--bg-surface-2); color: var(--text-main); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--bg-page); }
.btn.danger { background: var(--danger); }
.btn.small { padding: .38rem .7rem; font-size: .85rem; }

.field { margin-bottom: 15px; }
.field label { display: block; margin-bottom: 5px; font-size: .85rem; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .6rem .7rem; border-radius: 8px;
  border: 1px solid var(--border); font-size: .95rem; font-family: inherit;
  background: var(--bg-surface); color: var(--text-main);
}
/* A checkbox or a radio is not a text box: full width puts it on its own line
   above the label it belongs to. Same trap the product SPA hit. */
.field input[type=checkbox],
.field input[type=radio] { width: auto; margin-right: 8px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent); border-color: var(--accent);
}
.field .hint { font-size: .8rem; color: var(--text-muted); margin-top: 5px; }
.field .hint.ok { color: var(--success); }
.field .hint.bad { color: var(--danger); }
.check-row { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; }
.check-row input { margin-top: 4px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px) { .two-col { grid-template-columns: 1fr; } }

.alert { border-radius: 8px; padding: 12px 14px; font-size: .9rem; margin-bottom: 16px; }
.alert.bad { background: var(--danger-soft); color: var(--danger); }
.alert.good { background: var(--success-soft); color: var(--success); }
.alert.warn { background: var(--warning-soft); color: var(--warning); }

/* ---- plans ---- */
.plan {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.plan:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.plan.chosen { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan h4 { margin: 0; font-size: 1.05rem; }
.plan .price { font-weight: 600; color: var(--accent); }
.plan .blurb { color: var(--text-muted); font-size: .88rem; flex: 1; min-height: 66px; }
.plan .btn { align-self: flex-start; text-align: center; }
.plan .tag {
  align-self: flex-start; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; background: var(--accent-soft); color: var(--accent);
  padding: 2px 8px; border-radius: 999px;
}

/* ---- tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.tile { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.tile .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.tile .value { font-size: 2rem; font-weight: 600; line-height: 1.2; margin-top: 4px; }
.tile .foot { font-size: .82rem; color: var(--text-muted); }
.tile.warn .value { color: var(--warning); }
.tile.bad .value { color: var(--danger); }
.tile.good .value { color: var(--success); }

/* ---- tables ---- */
table.grid-t { width: 100%; border-collapse: collapse; }
table.grid-t th, table.grid-t td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: .9rem;
}
table.grid-t th { background: var(--bg-surface-2); font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
table.grid-t tbody tr:hover { background: var(--bg-surface-2); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem;
  padding: 3px 10px; border-radius: 999px; background: var(--bg-surface-2); color: var(--text-muted); }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--success-soft); color: var(--success); }
.pill.warn { background: var(--warning-soft); color: var(--warning); }
.pill.bad { background: var(--danger-soft); color: var(--danger); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 24px 0 18px; }
.tabs button {
  background: none; border: none; padding: 10px 16px; cursor: pointer; font-size: .93rem;
  color: var(--text-muted); border-bottom: 2px solid transparent; font-family: inherit;
}
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.empty .ico { font-size: 2rem; opacity: .5; }

.log {
  background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; font-family: Consolas, monospace; font-size: .82rem;
  white-space: pre-wrap; max-height: 320px; overflow: auto;
}

/* ---- centred auth card ---- */
.auth-wrap { display: flex; align-items: center; justify-content: center; padding: 60px 20px; }
.auth-card { width: min(420px, 94vw); }

/* ---- plan editor (H1) ---- */
.modal-back {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal { width: min(560px, 96vw); max-height: 92vh; overflow: auto; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .two-up { grid-template-columns: 1fr; } }
.grid-t td.num, .grid-t th.num { text-align: right; white-space: nowrap; }
.btn.small + .btn.small { margin-left: 6px; }