/* Prototype dashboard styling.
   Colours and fonts come from the site's own design tokens (loaded via the
   Next.js stylesheets), so this stays in step with the marketing pages instead
   of approximating them. */
:root { --gl-sidebar: 248px; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background: var(--background, #fcfcfc);
  color: var(--foreground, #101114);
  font-family: var(--font-sans, ui-sans-serif, -apple-system, "Segoe UI", Inter, sans-serif);
  font-size: 14px; line-height: 1.55;
}
a { color: inherit; }

.gl-shell { display: grid; grid-template-columns: var(--gl-sidebar) 1fr; min-height: 100vh; }

.gl-side {
  border-right: 1px solid var(--border, #e6e8eb);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 4px;
  background: var(--card, #fff); position: sticky; top: 0; height: 100vh;
}
.gl-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 16px; font-weight: 650;
            font-family: var(--font-brand, inherit); font-size: 16px; text-decoration: none; }
.gl-brand svg { width: 22px; height: 22px; }
.gl-navlink {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px;
  text-decoration: none; color: var(--muted-foreground, #62676e); font-weight: 500;
}
.gl-navlink:hover { background: var(--accent, #f2f4f6); color: var(--foreground, #101114); }
.gl-navlink[aria-current="page"] { background: var(--accent, #f2f4f6); color: var(--foreground, #101114); }
.gl-side-foot { margin-top: auto; border-top: 1px solid var(--border, #e6e8eb); padding-top: 12px; font-size: 12.5px; }
.gl-who { color: var(--muted-foreground, #62676e); padding: 0 10px 8px; word-break: break-all; }

.gl-main { padding: 30px 34px 60px; max-width: 1080px; }
.gl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 6px; }
h1 { font-size: 1.5rem; letter-spacing: -.02em; margin: 0; font-family: var(--font-brand, inherit); }
.gl-sub { color: var(--muted-foreground, #62676e); margin: 4px 0 26px; }

.gl-banner {
  border: 1px solid var(--border, #e6e8eb); border-left: 3px solid var(--accent-foreground, #0290ff);
  background: var(--card, #fff); border-radius: 10px; padding: 11px 14px; margin: 0 0 24px;
  color: var(--muted-foreground, #62676e); font-size: 13px;
}

.gl-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 28px; }
.gl-card { border: 1px solid var(--border, #e6e8eb); border-radius: 12px; background: var(--card, #fff); padding: 15px 16px; }
.gl-card .n { font-size: 1.7rem; font-weight: 650; letter-spacing: -.02em; }
.gl-card .k { color: var(--muted-foreground, #62676e); font-size: 12.5px; }

.gl-list { border: 1px solid var(--border, #e6e8eb); border-radius: 12px; background: var(--card, #fff); overflow: hidden; }
.gl-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--border, #e6e8eb); }
.gl-row:first-child { border-top: 0; }
.gl-row .grow { flex: 1; min-width: 0; }
.gl-row .nm { font-weight: 600; }
.gl-row .dt { color: var(--muted-foreground, #62676e); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }

.gl-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border, #e6e8eb); background: var(--card, #fff); color: inherit;
  font: inherit; font-weight: 550; cursor: pointer; text-decoration: none;
}
.gl-btn:hover { background: var(--accent, #f2f4f6); }
.gl-btn.primary { background: var(--foreground, #101114); color: var(--background, #fff); border-color: transparent; }
.gl-btn.primary:hover { filter: brightness(1.15); }
.gl-btn.danger:hover { color: var(--destructive-foreground, #ea2630); }
.gl-btn:disabled { opacity: .55; cursor: default; }
.gl-btn.sm { padding: 5px 10px; font-size: 13px; }

.gl-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.gl-field label { font-weight: 550; font-size: 13px; }
input[type=text], input[type=email], textarea, select {
  width: 100%; padding: 9px 11px; border-radius: 8px; font: inherit;
  border: 1px solid var(--border, #e6e8eb); background: var(--background, #fcfcfc);
  color: var(--foreground, #101114);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-foreground, #0290ff); outline-offset: 1px; }

.gl-pill { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border, #e6e8eb);
           color: var(--muted-foreground, #62676e); white-space: nowrap; }
.gl-pill.on { color: #1a7f37; border-color: #1a7f3733; background: #1a7f370f; }

.gl-empty { padding: 40px 20px; text-align: center; color: var(--muted-foreground, #62676e); }
.gl-note { font-size: 13px; margin: 10px 0 0; }
.gl-note.err { color: var(--destructive-foreground, #ea2630); }
.gl-auth { max-width: 380px; margin: 12vh auto; padding: 0 20px; }
.gl-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }

/* Narrow screens -------------------------------------------------------------
   These rules must come last. Declared earlier they lose the cascade to the
   base .gl-side rule, which leaves a sticky full-height sidebar covering the
   whole viewport and pushes the content off-screen.

   The sidebar becomes a horizontal bar rather than disappearing: hiding it
   would leave a phone with no way to move between sections. */
@media (max-width: 860px) {
  .gl-shell { grid-template-columns: 1fr; }
  .gl-side {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 2px; overflow-x: auto; padding: 10px 12px;
    border-right: 0; border-bottom: 1px solid var(--border, #e6e8eb);
  }
  .gl-brand { padding: 0 10px 0 0; flex-shrink: 0; }
  .gl-navlink { padding: 6px 11px; white-space: nowrap; flex-shrink: 0; }
  .gl-side-foot {
    margin-top: 0; margin-left: auto; border-top: 0; padding-top: 0;
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  }
  .gl-who { display: none; }
  .gl-main { padding: 22px 18px 48px; }
  .gl-head { flex-direction: column; gap: 12px; }
}