/* SageStack control panel — self-contained styling.
 * Palette lifted verbatim from projectai (which took it from cptbs) so the hub
 * reads as one system with the apps it launches: green chrome, one gold CTA. */

:root {
  --green: #075e4e;
  --green-light: #84a69c;
  --accent: #d29f59;
  --accent-fg: #2a1d05;
  --bg: #f4f3f0;
  --panel: #ffffff;
  --line: #d9d6cf;
  --fg: #23211e;
  --muted: #7a756c;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Full-height app shell: topbar + tab bar are fixed height, the panel fills the
 * rest and the active iframe fills the panel. */
body {
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- Buttons --------------------------------------------------------- */
.btn {
  cursor: pointer; font: inherit; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg);
  border-radius: 8px; padding: 8px 14px;
}
.btn:hover { border-color: var(--green-light); }
/* The one gold call-to-action — matches projectai / CPT's "Run" button. */
.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 600; }
.btn-primary:hover { filter: brightness(0.96); border-color: transparent; }
.btn-light { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn-light:hover { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.55); }

/* ---- Top bar --------------------------------------------------------- */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--green);
  color: #fff;
  padding: 16px 24px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { font-size: 32px; line-height: 1; }
#topbar h1 { margin: 0; font-size: 20px; font-weight: 600; }
.subtitle { margin: 2px 0 0; font-size: 13px; color: #cfe0da; }
.whoami { display: flex; align-items: center; gap: 12px; }
.whoami-email { font-size: 13px; color: #cfe0da; }

/* ---- Tab bar --------------------------------------------------------- */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: #0a4b3f;               /* a shade under the green topbar */
  padding: 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.tab {
  cursor: pointer; font: inherit; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
  border: none; background: transparent; color: #cfe0da;
  padding: 12px 16px;
  border-bottom: 3px solid transparent;
}
.tab:hover { color: #fff; }
.tab-icon { font-size: 17px; line-height: 1; }
.tab.active {
  color: #fff; font-weight: 600;
  border-bottom-color: var(--accent);   /* gold underline for the active tab */
}

/* ---- Panels + embedded apps ------------------------------------------ */
main { flex: 1; min-height: 0; }        /* min-height:0 lets the iframe shrink */
.panels { position: relative; height: 100%; }
.grid-error { color: #b3261e; font-size: 14px; padding: 24px; }

.panel { display: none; height: 100%; }
.panel.active { display: block; }

.app-frame {
  width: 100%; height: 100%;
  border: 0; display: block; background: var(--panel);
}

/* Panel for externally hosted apps that can't be framed. */
.external {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 32px;
}
.external-icon { font-size: 48px; line-height: 1; }
.external-name { margin: 0; font-size: 20px; color: var(--green); }
.external-note { margin: 0; max-width: 520px; font-size: 14px; color: var(--muted); }
.external-open { margin-top: 8px; text-decoration: none; }

/* ---- Auth gate (structure from cptbs, palette from projectai) -------- */
#auth-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: var(--green);
  background-image: linear-gradient(135deg, var(--green), #0a3a30);
}
.auth-card {
  background: var(--panel); border-radius: 14px; padding: 28px 26px; width: 360px; max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.auth-card h2 { margin: 0 0 4px; font-size: 20px; color: var(--green); }
.auth-sub { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.auth-card input[type="email"], .auth-card input[type="text"], #auth-code {
  width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg);
}
.auth-card input:focus { outline: 2px solid var(--green-light); outline-offset: -1px; }
#auth-code { letter-spacing: 4px; text-align: center; }
.auth-card .btn-primary { width: 100%; padding: 10px; font-size: 14px; }
.auth-trust { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 2px 0 12px; cursor: pointer; }
.auth-trust input { width: auto; }
.auth-msg { font-size: 13px; color: var(--muted); margin: 12px 0 0; min-height: 1em; }
.auth-msg.err { color: #b3261e; }