/* Client portal: login + dashboards. Leans on styles.css tokens. */

[hidden] { display: none !important; }

.nav-crumb { color: var(--faint); font: 500 0.8rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.who { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; color: var(--muted); }

/* login */
.portal-login { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 1.5rem; }
.login-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 2rem 1.9rem; width: min(400px, 100%); display: grid; gap: 1rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.login-card h1 { font-size: 1.6rem; }
.login-lede { color: var(--muted); font-size: 0.92rem; }
.login-card label { display: grid; gap: 0.35rem; font: 600 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.login-card input {
  font: 400 1rem/1.4 inherit; letter-spacing: normal; text-transform: none;
  padding: 0.6rem 0.75rem; border-radius: 8px; border: 1px solid var(--line);
  background: #0b0f16; color: var(--ink);
}
.login-card input:focus { outline: none; border-color: var(--violet); }
.login-card-wide { width: min(560px, 100%); }
.error { color: #ff8d7e; font-size: 0.86rem; }
.ok { color: var(--teal); font-size: 0.86rem; }

/* access agreement */
.terms {
  max-height: 240px; overflow-y: auto; background: #0b0f16;
  border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem;
}
.terms h2 { font-size: 0.95rem; margin-bottom: 0.35rem; }
.terms .terms-intro { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.8rem; }
.terms section { margin-bottom: 0.8rem; }
.terms section:last-of-type { margin-bottom: 0.4rem; }
.terms h3 { font: 600 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--violet); margin-bottom: 0.25rem; }
.terms p { color: var(--muted); font-size: 0.84rem; line-height: 1.55; }
.terms .terms-foot { color: var(--faint); font-size: 0.76rem; margin-top: 0.7rem; }
/* The label wrapper is a grid, unlike the stacked field labels above it. */
.login-card label.check {
  grid-template-columns: auto 1fr; align-items: start; gap: 0.6rem;
  font: 400 0.86rem/1.45 inherit; text-transform: none; letter-spacing: normal; color: var(--ink);
}
.login-card label.check input[type="checkbox"] {
  width: 17px; height: 17px; margin-top: 0.1rem; accent-color: var(--violet); padding: 0;
}
.login-alt { font-size: 0.85rem; margin-top: 0.2rem; }
.login-alt a { color: var(--violet); text-decoration: none; }
.login-alt a:hover { text-decoration: underline; }

/* portal shell */
.portal { max-width: var(--max); margin: 0 auto; padding: 2.2rem clamp(1rem, 4vw, 2.4rem) 4rem; }
.portal-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; margin-bottom: 1.6rem; }
.portal-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.muted { color: var(--faint); font-size: 0.82rem; margin-top: 0.35rem; }
#clientPick {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.5rem 0.7rem; font: inherit;
}

/* Deliberately readable rather than fine print: this qualifies every number on
   the page, so it gets real contrast and body-text size, not a grey whisper. */
.data-notice {
  display: block; margin: 0 0 1.2rem; padding: 0.7rem 0.9rem;
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 8px; background: rgba(240, 182, 75, 0.06);
  color: var(--ink); font-size: 0.86rem; line-height: 1.5;
}

.portal-tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; overflow-x: auto; }
/* Longhands, not `font: 600 0.92rem inherit`. `inherit` is a CSS-wide keyword
   and is not a valid family name inside the font shorthand, so that whole
   declaration was silently dropped and these labels were rendering at the UA
   button default (13.3px Arial, weight 400) rather than the intended 0.92rem
   semibold. Carrying the shorthand over to the anchors would have dropped it
   again and jumped every label to 16.5px. */
.portal-tabs a {
  background: none; border: none; color: var(--muted);
  font-family: inherit; font-size: 0.92rem; font-weight: 600; line-height: inherit;
  padding: 0.65rem 1rem; cursor: pointer; border-bottom: 2px solid transparent;
  white-space: nowrap; text-decoration: none; display: inline-block;
}
.portal-tabs a.active { color: var(--violet); border-bottom-color: var(--violet); }
/* The tabs are keyboard-navigable links now and styles.css defines no :focus
   rules at all. */
.portal-tabs a:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
#tabBody:focus { outline: none; }
#tabBody:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }

/* dashboard pieces */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.95rem 1.05rem;
}
.stat .v { font-size: 1.45rem; font-weight: 680; letter-spacing: -0.02em; }
.stat .l { color: var(--faint); font-size: 0.78rem; margin-top: 0.15rem; }

.series-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.1rem; margin-bottom: 1.2rem;
}
.series-card .name { font: 600 0.75rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.series-card svg { width: 100%; height: 72px; }
.series-card polyline { fill: none; stroke: var(--violet); stroke-width: 2; }

.tbl-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 0.89rem; }
th, td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--faint); font: 600 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge.green { background: rgba(62, 200, 180, 0.15); color: var(--teal); }
.badge.amber { background: rgba(240, 182, 75, 0.15); color: var(--amber); }
.badge.red { background: rgba(255, 110, 90, 0.15); color: #ff8d7e; }

.empty { color: var(--faint); padding: 2rem 0; }

/* documents */
.docs { max-width: var(--max); margin: 2.5rem auto 0; }
.docs-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.9rem; }
.docs-head h2 { font-size: 1.15rem; }
.tier { font: 600 0.7rem var(--mono); padding: 0.15rem 0.5rem; border-radius: 999px; letter-spacing: 0.06em; }
.tier-live { background: rgba(62, 200, 180, 0.15); color: var(--teal); }
.tier-archive { background: rgba(125, 147, 178, 0.15); color: var(--slate); }
.doc-status {
  background: #0b0f16; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.3rem 0.45rem; font: inherit; font-size: 0.82rem;
}
.docs a { color: var(--violet); }
.docs a:hover { text-decoration: underline; }

/* admin panel */
.admin { max-width: var(--max); margin: 2.8rem auto 0; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.admin-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.15rem 1.2rem; display: grid; gap: 0.85rem; align-content: start;
}
.admin-card h3 { font-size: 1rem; }
.admin-card label { display: grid; gap: 0.35rem; font: 600 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.admin-card input, .admin-card select {
  font: 400 0.95rem/1.4 inherit; letter-spacing: normal; text-transform: none;
  padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid var(--line);
  background: #0b0f16; color: var(--ink);
}
.admin-card input:focus, .admin-card select:focus { outline: none; border-color: var(--violet); }
.admin-card input[type="file"] { padding: 0.45rem 0.5rem; font-size: 0.85rem; }
.admin-card .muted { margin-top: 0; }
.admin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.invite-result { display: grid; gap: 0.45rem; font-size: 0.85rem; color: var(--muted); }
.invite-result input {
  width: 100%; font: 400 0.76rem var(--mono); padding: 0.45rem 0.55rem;
  border-radius: 6px; border: 1px solid var(--line); background: #0b0f16; color: var(--ink);
}
.btn-mini {
  font: 600 0.76rem inherit; padding: 0.28rem 0.65rem; border-radius: 6px;
  background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
}
.btn-mini:hover { border-color: var(--violet); color: var(--ink); }
.btn-mini:disabled { opacity: 0.5; cursor: default; }
.users-actions { display: flex; gap: 0.4rem; }