:root {
  --bg: #0a0f14;
  --bg-panel: #10171d;
  --bg-elevated: #141c22;
  --border: #1d272e;
  --border-soft: #161e24;
  --accent: #2ed9c3;
  --accent-dim: #1b7f73;
  --accent-soft: rgba(46, 217, 195, 0.12);
  --text: #eaf2f1;
  --text-muted: #8aa0a0;
  --text-faint: #56676a;
  --danger: #e2685a;
  --accent-ink: #04120f;
  --radius: 10px;
  --bar-height: 64px;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* Light theme. Only the dashboard's own chrome changes - a tool loaded in the workspace
   keeps its own styling, so a light dashboard can still hold dark tool content until the
   tools themselves gain a light mode. */
body.theme-light {
  --bg: #f4f6f7;
  --bg-panel: #ffffff;
  --bg-elevated: #ffffff;
  --border: #d5dcdf;
  --border-soft: #e5eaec;
  --text: #131a1e;
  --text-muted: #5a6b70;
  --text-faint: #8a9a9e;
}

/* Brand accents, measured from the real artwork and shared with the safety-pack
   generator (src/lib/brands.py). Pantone references are that file's, not invented here. */
body.scheme-maxwood-nz {
  --accent: #c1ce23; /* Pantone 390 C */
  --accent-dim: #7c850f;
  --accent-soft: rgba(193, 206, 35, 0.14);
}

body.scheme-maxwood-au {
  --accent: #bf3019; /* Pantone 1805 C */
  --accent-dim: #7d2011;
  --accent-soft: rgba(191, 48, 25, 0.16);
}

body.scheme-hardwood {
  --accent: #f78f1e;
  --accent-dim: #a35c0d;
  --accent-soft: rgba(247, 143, 30, 0.16);
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--bar-height);
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--text);
}

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.wordmark .name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text);
}

.wordmark .sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-top: 2px;
}

.tools {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 1 1 auto;
  /* Without this a flex item refuses to shrink below its content, so eleven tools push
     the bar wider instead of scrolling inside it. */
  min-width: 0;
  justify-content: center;
  /* "safe" keeps the first items reachable once the row overflows; centred alignment
     alone pushes them off the scrollable start. Ignored by browsers that lack it, which
     fall back to the plain centre above. */
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  min-width: 0;
}

.tools::-webkit-scrollbar {
  height: 4px;
}

.tools::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.tool-item {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 8px;
  text-decoration: none;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.tool-item svg {
  width: 20px;
  height: 20px;
}

.tool-item span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.tool-item:hover,
.tool-item:focus-visible {
  color: var(--text);
  border-color: var(--accent-dim);
}

.tool-item.active {
  color: var(--accent);
  border-color: var(--accent);
}

.utility {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.bell svg {
  width: 19px;
  height: 19px;
}

.bell:hover,
.bell:focus-visible {
  background: var(--bg-elevated);
  color: var(--text);
}

.bell .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.user-menu {
  position: relative;
}

.user-menu > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  padding: 4px 6px 4px 4px;
  border-radius: 20px;
}

.user-menu > summary::-webkit-details-marker {
  display: none;
}

.user-menu > summary:hover,
.user-menu > summary:focus-visible {
  background: var(--bg-elevated);
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.chevron {
  width: 12px;
  height: 12px;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}

.user-menu[open] .chevron {
  transform: rotate(180deg);
}

.user-menu .menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.user-menu .menu-label {
  padding: 8px 10px 6px;
  font-size: 12px;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
  word-break: break-all;
}

.user-menu .menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  color: var(--text);
}

.user-menu .menu a:hover {
  background: var(--bg-elevated);
  color: var(--accent);
}

.user-menu .menu .signout-form button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.user-menu .menu .signout-form button:hover {
  background: var(--bg-elevated);
  color: var(--accent);
}

/* Page shell */

/* The bar is a known fixed height, so the workspace is told exactly how tall to be
   rather than inheriting it through a chain of flex containers. An earlier version did
   the latter and the frame collapsed to a sliver: every link in that chain has to be
   right, and one auto height anywhere silently breaks it. */
#workspace {
  height: calc(100vh - var(--bar-height) - 1px);
}

#workspace > [hidden] {
  display: none !important;
}

.frame-host {
  height: 100%;
  display: flex;
}

.frame-host > iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg);
}

.frame-placeholder {
  margin: auto;
  text-align: center;
  padding: 40px 24px;
}

.frame-placeholder h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.frame-placeholder .muted {
  color: var(--muted);
  margin-top: 10px;
}

/* The workspace has a fixed height, so the welcome panel scrolls inside it rather than
   growing the page. */
.welcome {
  height: 100%;
  overflow-y: auto;
  padding: 40px 24px 64px;
}

.welcome > * {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.home-form {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.home-form label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.home-row {
  display: flex;
  gap: 6px;
}

.home-row select {
  flex: 1 1 auto;
  min-width: 0;
}

.welcome h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
}

.welcome p.lede {
  color: var(--text-muted);
  margin: 0 0 32px;
}

.empty-state {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Standalone branded pages (auth, admin, pending, coming soon, no access) */

.standalone {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.standalone-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.standalone-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.panel {
  width: 100%;
  max-width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.panel.wide {
  max-width: 560px;
  text-align: center;
}

.panel h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}

.panel p {
  color: var(--text-muted);
  font-size: 13.5px;
  margin: 0 0 20px;
}

.panel .back-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.panel .back-link:hover {
  text-decoration: underline;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.field label {
  font-size: 12px;
  color: var(--text-muted);
}

.field input,
.field select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
}

.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--accent);
}

.btn {
  width: 100%;
  padding: 11px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  filter: brightness(1.08);
}

.form-error {
  color: var(--danger);
  font-size: 13px;
  margin: 0 0 14px;
}

/* Admin table */

.admin-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  background: var(--bg-panel);
}

th,
td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  vertical-align: top;
}

th {
  color: var(--text-faint);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: none;
}

.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-elevated);
  color: var(--text-muted);
}

.status-pill.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.approve-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.approve-form input[type="text"],
.approve-form input:not([type]) {
  padding: 6px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
  width: 110px;
}

.approve-form label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: var(--text-faint);
}

.approve-form select {
  padding: 5px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
}

.approve-form button {
  padding: 7px 12px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* Per-row admin actions: secondary to "Save and approve", so outlined not solid */

.row-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
}

.row-actions form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.row-actions input[type="password"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
}

.row-actions button {
  padding: 6px 10px;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.row-actions button:hover,
.row-actions button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.invite-section {
  margin-top: 36px;
}

.invite-section h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}

@media (max-width: 640px) {
  .bar {
    gap: 10px;
    padding: 0 12px;
  }

  .wordmark .sub {
    display: none;
  }

  .tool-item {
    padding: 10px 10px 8px;
  }

  .tool-item span {
    display: none;
  }

  main {
    padding: 28px 14px 48px;
  }
}

.providers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.btn-provider {
  display: block;
  text-align: center;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-provider:hover {
  border-color: var(--accent-dim);
}

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 12px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

/* Side navigation. The bar becomes a column down the left and the workspace takes the
   full height beside it, rather than the remaining height beneath it. */
/* body is not a flex container by default - an earlier fix removed that when the
   workspace stopped depending on a flex chain for its height. The side layout needs it
   back, or the bar overlays the content instead of sitting beside it. */
body.nav-side {
  display: flex;
  flex-direction: row;
}

body.nav-side .bar {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 190px;
  flex: 0 0 190px;
  height: 100vh;
  padding: 18px 12px;
  border-bottom: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

body.nav-side .tools {
  flex-direction: column;
  gap: 2px;
  overflow-x: visible;
  mask-image: none;
  -webkit-mask-image: none;
}

body.nav-side .tool-item {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  padding: 8px 10px;
  border-bottom: 0;
  border-left: 2px solid transparent;
  text-align: left;
}

body.nav-side .tool-item.active,
body.nav-side .tool-item:hover {
  border-bottom: 0;
  border-left-color: var(--accent);
}

/* The bell and user menu stay in the top right corner whichever way the navigation is
   arranged, so people always know where to find their own settings. With the side bar
   that means lifting them out of the column and floating them over the workspace, on a
   backdrop so they stay legible against whatever a tool renders underneath. */
body.nav-side .utility {
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 30;
  gap: 10px;
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

body.nav-side main {
  flex: 1 1 auto;
  min-width: 0;
}

body.nav-side #workspace {
  height: 100vh;
}

/* With eleven tools the top row overflows. It scrolls; the fade tells you so, instead of
   the row simply looking cut off. */
body.nav-top .tools {
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

body.nav-top .tools::-webkit-scrollbar {
  display: none;
}

.brand-lockup {
  display: block;
  height: 26px;
  width: auto;
  max-width: 100%;
}

body.nav-side .brand-lockup {
  height: 22px;
}

.appearance-form {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
}

.appearance-form label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 8px 0 4px;
}

.appearance-form select {
  width: 100%;
}

.appearance-form button {
  margin-top: 10px;
  width: 100%;
}

/* Collapsed side bar: icons only. The label is hidden rather than removed so it still
   reads to a screen reader, and each item carries a title for a hover tooltip. */
body.nav-icons .bar {
  width: 64px;
  flex: 0 0 64px;
  padding: 18px 8px;
  align-items: center;
}

body.nav-icons .brand {
  display: none;
}

.nav-toggle {
  display: none;
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  line-height: 0;
}

.nav-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.nav-toggle .chevron-lr {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

body.nav-side .nav-toggle {
  display: block;
}

/* Points left to hide, right to expand. */
body.nav-icons .nav-toggle {
  align-self: center;
}

body.nav-icons .nav-toggle .chevron-lr {
  transform: rotate(180deg);
}

body.nav-icons .tool-item {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}

body.nav-icons .tool-item span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Steppers at each end of the top bar. The row scrolls, but the scrollbar is hidden, so
   with a mouse there was no way to move it - these are that way. Each click moves by
   exactly one tool, revealing one at the end you are heading toward and hiding one
   behind. JS unhides them only when the row actually overflows. */
.tools-step {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 5px;
  line-height: 0;
}

.tools-step:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.tools-step:disabled {
  opacity: 0.3;
  cursor: default;
}

.tools-step .chevron-lr {
  width: 16px;
  height: 16px;
}

.tools-step.flip .chevron-lr {
  transform: rotate(180deg);
}

body.nav-top .tools-step:not([hidden]) {
  display: flex;
}