/* ========================================================================== */
/* GLYCOFY — Global Theme & Layout (CSS-only)                                 */
/* ========================================================================== */

/* ---------- Theme tokens ---------- */
:root{
  --bg: #0b1016;
  --panel: #0f141b;
  --glass: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  --border: rgba(80,200,138,.16);
  --text: #e7ecf3;
  --muted: #9fb0c9;

  --primary: #50c88a;           /* Glycofy leaf green */
  --primary-strong: #74dda9;

  --chip-bg: rgba(255,255,255,.03);
  --chip-border: rgba(255,255,255,.08);

  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 22px;

  --shadow: 0 6px 28px rgba(0,0,0,.35);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html, body {
  background: var(--bg);
  color: var(--text);
  max-width: 100%;
}
body.ui-root {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-strong); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [contenteditable="true"]:focus-visible { outline: 3px solid var(--primary-strong); outline-offset: 3px; }
.skip-link{position:fixed;left:12px;top:8px;z-index:10000;transform:translateY(-150%);border-radius:10px;background:var(--primary);color:#071b14;padding:10px 14px;font-weight:800}.skip-link:focus{transform:translateY(0)}
.connection-banner{position:fixed;left:50%;top:12px;z-index:9000;width:min(560px,calc(100vw - 24px));transform:translateX(-50%);border:1px solid rgba(245,185,66,.5);border-radius:12px;background:#332715;color:#ffe3a6;padding:11px 14px;text-align:center;font-weight:750;box-shadow:var(--shadow)}.connection-banner[hidden]{display:none}

/* ---------- Global layout primitives ---------- */
.container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 24px; }
.page { padding: 40px 0 80px; }

/* ---------- Cards / panels ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.card--glass { background: var(--glass), var(--panel); }
.card__header, .card__body, .card__footer { padding: 16px 18px; }

/* ---------- Buttons ---------- */
.btn {
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.btn:hover { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.btn--pill { border-radius: 999px; }
.btn--warning { border-color: rgba(248,191,84,.28); background: rgba(248,191,84,.12); }
.btn--warning:hover { background: rgba(248,191,84,.18); }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; }
.table th { color: var(--muted); font-weight: 700; }

/* ---------- Chips / pills ---------- */
.pill, .chip {
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}

/* ---------- Muted text ---------- */
.muted { color: var(--muted); }

/* ========================================================================== */
/* Topbar — IDENTICAL across all pages (brand left, nav center, logout right) */
/* ========================================================================== */
.topbar{
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 14, 20, 0.9);
  border-bottom: 1px solid rgba(80,200,138,.10);
  backdrop-filter: saturate(140%) blur(8px);
}
.topbar__inner{
  height: 68px;
  display: flex; align-items: center; gap: 20px;
}

/* brand (left) */
.topbar .brand{
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: 11px;
  background: #fbfaf8;
  text-decoration: none;
  white-space: nowrap;
  line-height: 0;
}
.topbar .brand img{ display:block; width:142px; height:auto; }

/* nav (center) */
.topbar .nav{ display: flex; align-items: center; gap: 24px; }

/* center the first .nav between brand (left) and logout (right) */
.topbar__inner > .nav:nth-of-type(1){ margin-left: auto; margin-right: auto; }

.topbar .nav a{
  color: var(--primary);
  font-weight: 700;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.topbar .nav a:hover { color: var(--primary-strong); border-color: rgba(80,200,138,.22); }
.topbar .nav a.active{
  background: rgba(80,200,138,.10);
  border-color: rgba(80,200,138,.28);
}

/* right (logout) stays to the far right */
.topbar__inner > .nav:last-child{ margin-left: auto; }

/* ---- Unified blue Logout button across all pages ---- */
.topbar [data-nav="logout"],
.topbar #logout_btn{
  border: 1px solid rgba(80,200,138,.42);
  background: var(--primary);
  color: #071b14;
  padding: 10px 16px;
  border-radius: 16px;
  font-weight: 800;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.topbar [data-nav="logout"]:hover,
.topbar #logout_btn:hover{
  background: var(--primary-strong);
  border-color: rgba(160,190,255,.5);
  transform: translateY(-1px);
}

/* ========================================================================== */
/* Page-head (shared hero on Plan/Profile/Activities)                         */
/* ========================================================================== */
.page-head{
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: 28px;
  padding: 28px;
  border-radius: var(--radius-2xl);
  background: var(--glass), var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
@media (max-width: 960px){ .page-head{ grid-template-columns: 1fr; } }

.page-head .kicker{ color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; margin-bottom: 6px; }
.page-title{ font-size: clamp(28px, 4vw, 42px); line-height: 1.05; margin: 0 0 6px 0; }
.subtle{ color: var(--muted); margin: 0; }

.page-head__controls{ display: grid; gap: 16px; align-content: start; }
.control-row{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* small stats blocks used on several pages */
.stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
}
.stat{ border: 1px solid var(--chip-border); background: var(--panel); border-radius: 16px; padding: 12px 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); }
.stat__label{ color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.stat__value{ font-weight: 800; font-size: 22px; letter-spacing: .2px; }
.stat__unit{ color: var(--muted); font-size: 12px; }

/* Beta feedback stays reachable without competing with primary actions. */
.beta-feedback-button{position:fixed;right:18px;bottom:18px;z-index:180;border:1px solid rgba(80,200,138,.46);border-radius:999px;background:#15231d;color:#9be0bc;padding:11px 16px;font:700 14px/1 Inter,system-ui;box-shadow:0 12px 30px rgba(0,0,0,.4);cursor:pointer}
.beta-feedback-button:hover{background:#1a3026;color:#c1f0d6}.beta-feedback-dialog{width:min(560px,calc(100vw - 28px));padding:0;border:1px solid var(--border);border-radius:20px;background:var(--panel);color:var(--text);box-shadow:0 28px 80px rgba(0,0,0,.65)}
.beta-feedback-dialog::backdrop{background:rgba(3,7,12,.72);backdrop-filter:blur(4px)}.beta-feedback-form{display:grid;gap:16px;padding:24px}.beta-feedback-head{display:flex;justify-content:space-between;gap:16px}.beta-feedback-head h2{margin:4px 0 0}.beta-feedback-kicker{color:var(--primary);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.beta-feedback-close{border:0;background:transparent;color:var(--muted);font-size:28px;cursor:pointer}.beta-feedback-form label{display:grid;gap:7px;font-weight:700}.beta-feedback-form select,.beta-feedback-form textarea{width:100%;border:1px solid var(--chip-border);border-radius:12px;background:#0b1016;color:var(--text);padding:11px;font:inherit}.beta-feedback-form textarea{min-height:120px;resize:vertical}.beta-feedback-privacy,.beta-feedback-state{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.beta-feedback-submit{justify-self:end;background:var(--primary);color:#071b14}
@media(max-width:600px){.beta-feedback-button{right:12px;bottom:12px}.beta-feedback-form{padding:20px}}

.welcome-tour{width:min(580px,calc(100vw - 28px));padding:0;border:1px solid rgba(80,200,138,.26);border-radius:24px;background:linear-gradient(150deg,#16221e,#111820 68%);color:var(--text);box-shadow:0 32px 100px rgba(0,0,0,.72)}
.welcome-tour::backdrop{background:rgba(3,7,12,.78);backdrop-filter:blur(7px)}
.welcome-tour__body{padding:30px}.welcome-tour__progress{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:7px;margin-bottom:30px}.welcome-tour__progress span{height:4px;border-radius:999px;background:rgba(255,255,255,.12)}.welcome-tour__progress span.active{background:var(--primary)}
.welcome-tour__eyebrow{margin:0 0 8px;color:var(--primary);font-size:12px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.welcome-tour h2{margin:0;font-size:clamp(26px,5vw,36px);line-height:1.08}.welcome-tour__copy{min-height:76px;margin:16px 0 28px;color:#b7c5d7;font-size:16px;line-height:1.6}.welcome-tour__actions{display:flex;align-items:center;gap:9px}.welcome-tour__spacer{flex:1}.welcome-tour__skip{border-color:transparent;background:transparent;color:var(--muted)}.welcome-tour__next{background:var(--primary);color:#071b14}
@media(max-width:600px){.welcome-tour__body{padding:24px 20px}.welcome-tour__copy{min-height:110px}.welcome-tour__actions{flex-wrap:wrap}.welcome-tour__skip{order:3;width:100%}.welcome-tour__spacer{display:none}.welcome-tour__back,.welcome-tour__next{flex:1;min-height:44px}}

/* ---------- Phone layout ----------
   Keep the brand and account action on row one, then give every destination an
   equal, tappable slot on row two. This prevents the desktop header from making
   the entire document wider than an iPhone viewport. */
@media (max-width: 760px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .page { padding-top: 24px; }

  .topbar__inner {
    height: auto !important;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 8px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }
  .topbar .brand { justify-self: start; padding: 2px 6px; }
  .topbar .brand img { width: 112px; }
  .topbar__inner > .nav:nth-of-type(1) {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .topbar__inner > .nav:last-child {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .topbar .nav a {
    min-width: 0;
    justify-content: center;
    padding: 9px 4px;
    font-size: 13px;
    text-align: center;
  }
  .topbar [data-nav="logout"],
  .topbar #logout_btn {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13px;
  }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  img, svg { max-width: 100%; }
}

@media (max-width: 380px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .topbar .brand img { width: 104px; }
  .topbar .nav a { padding-inline: 2px; font-size: 12px; }
  .beta-feedback-button { padding: 10px 13px; font-size: 13px; }
}