@charset "UTF-8";
/* Tixello — Cyberry admin console. Dark "OLED ops dashboard" theme.
   Per ui-ux-pro-max: Dark Mode (OLED), navy + status colors, Fira Sans/Code.
   Design tokens, no framework. */
:root {
  /* Surfaces (deep navy → elevated) */
  --bg: #0a0e1a;
  --surface: #111827;
  --surface-2: #161f33;
  --surface-3: #1d2740;
  --border: #25304b;
  --border-2: #324063;
  /* Text */
  --text: #e8edf6;
  --text-muted: #93a1bd;
  --text-dim: #64718e;
  /* Brand + accents */
  --accent: #e94560; /* Tixello coral */
  --accent-hover: #ff5b76;
  --accent-soft: rgba(233, 69, 96, 0.14);
  --link: #58b2f0;
  /* Status */
  --success: #34d399;
  --success-soft: rgba(52,211,153,.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251,191,36,.14);
  --danger: #f87171;
  --danger-soft: rgba(248,113,113,.14);
  --info: #60a5fa;
  --info-soft: rgba(96,165,250,.14);
  --radius: 12px;
  --radius-sm: 8px;
  --ring: 0 0 0 3px rgba(233,69,96,.35);
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --sidebar-w: 248px;
  --font: 'Fira Sans', system-ui, -apple-system, sans-serif;
  --mono: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ---------------- Base / reset / typography ---------------- */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: radial-gradient(1100px 600px at 88% -8%, rgba(233, 69, 96, 0.1), transparent 60%), radial-gradient(900px 500px at -5% 0%, rgba(88, 178, 240, 0.07), transparent 55%), var(--bg);
  background-attachment: fixed;
  min-height: 100dvh;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.mono, code {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
}

code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.86em;
  color: #cdd7ea;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

/* ---------------- Auth (login) — restricted console gate ----------------
   Deliberately distinct from the portal's split-screen marketing login:
   a single centered "ops console" panel on an engineering-grid backdrop. */
.auth {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 76px;
  position: relative;
  overflow-x: clip;
}

/* a tall panel (e.g. the 2FA gate) grows the page and scrolls instead of clipping */
.auth > .auth-console {
  margin: auto;
}

/* faint blueprint grid, masked to a soft pool behind the panel */
.auth::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(620px 480px at 50% 40%, #000, transparent 72%);
  mask-image: radial-gradient(620px 480px at 50% 40%, #000, transparent 72%);
  opacity: 0.22;
}

.auth-console {
  position: relative;
  width: 100%;
  max-width: 396px;
  padding: 34px 32px 24px;
  background: linear-gradient(180deg, var(--surface), #0d1422);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* coral hairline along the top edge of the panel */
.auth-console::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.auth-head {
  text-align: center;
  margin-bottom: 26px;
}

.auth-word {
  height: 38px;
  width: auto;
  display: block;
  margin: 0 auto 14px;
}

.auth-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.auth-submit {
  width: 100%;
  margin-top: 4px;
}

.auth-intro {
  margin: 0 0 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
}

/* 6-digit TOTP entry at the login challenge */
.auth-code {
  text-align: center;
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}

.auth-code::placeholder {
  letter-spacing: 0.42em;
  color: var(--border-2);
}

.auth-alt {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
}

.auth-alt a {
  color: var(--text-muted);
  text-decoration: none;
}

.auth-alt a:hover, .auth-alt a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* Errors on the console card get an accent rail so they carry presence without shouting. */
.auth-console .alert {
  border-left: 3px solid currentColor;
}

/* wider console for the forced-enrolment 2FA gate */
.auth-console.wide {
  max-width: 480px;
}

/* numbered "how to" steps on the 2FA gate */
.totp-steps {
  list-style: none;
  counter-reset: s;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 13px;
  text-align: left;
}

.totp-steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 11px;
  align-items: start;
}

.totp-steps li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

.totp-steps .step-txt {
  min-width: 0;
}

.totp-steps b {
  display: block;
  font-size: 13.5px;
  color: var(--text);
}

.totp-steps span {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* sign-out row beneath the locked 2FA gate */
.auth-foot-row {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
}

/* page byline, pinned to the bottom of the viewport */
.auth-by {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------------- App shell ---------------- */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100dvh;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  background: linear-gradient(180deg, #0c1322, #0a0e1a);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 20px;
}

.brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

.brand .tag {
  font-family: var(--font);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: auto;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}

.nav-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 14px 12px 6px;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14.5px;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}

.nav a svg {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.85;
}

.nav a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav a.active {
  background: var(--accent-soft);
  color: #fff;
}

.nav a.active svg {
  opacity: 1;
  color: var(--accent);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(233, 69, 96, 0.35);
}

/* ---------------- Main ---------------- */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: rgba(10, 14, 26, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar h1 {
  font-size: 19px;
}

.topbar .sub {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 2px;
}

.topbar .spacer {
  flex: 1;
}

/* Account menu — top-right of the topbar (avatar opens a dropdown with
   name/email, account links, and sign out). A native <details>/<summary>,
   matching the portal's .acct pattern. */
.acct {
  position: relative;
}

.acct > summary {
  list-style: none;
  cursor: pointer;
}

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

.acct-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}

.acct-avatar:hover {
  border-color: var(--border-2);
}

.acct[open] > .acct-avatar, .acct-avatar.active {
  border-color: var(--accent);
}

.acct-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 232px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 50;
}

.acct-head {
  padding: 8px 10px 6px;
  min-width: 0;
}

.acct-head b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-head span {
  display: block;
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-menu a, .acct-signout {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.acct-menu a:hover, .acct-signout:hover {
  background: var(--surface-3);
  color: var(--text);
}

.acct-menu a.active {
  background: var(--accent-soft);
  color: var(--text);
}

.acct-menu a svg, .acct-signout svg {
  width: 17px;
  height: 17px;
  color: var(--text-dim);
  flex: none;
}

.acct-menu a.active svg {
  color: var(--accent);
}

.acct-div {
  margin: 6px 4px;
  border: 0;
  border-top: 1px solid var(--border);
}

.acct-signout, .acct-signout svg {
  color: var(--danger);
}

.acct-signout:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

/* .menu-btn carries .btn too, so qualify it to beat .btn's display */
.btn.menu-btn {
  display: none;
}

.content {
  padding: 28px;
  max-width: 1440px;
  width: 100%;
}

/* A <button> made to read as a table-row link, for rows whose "view details"
   action is a modal rather than a real page (e.g. admin users). */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--link);
  cursor: pointer;
  vertical-align: baseline;
}

.link-btn:hover {
  text-decoration: underline;
}

/* ---------------- Cards / grid ---------------- */
.card {
  background: linear-gradient(180deg, var(--surface), #0f1626);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14.5px;
}

.card-body {
  padding: 20px;
}

/* Two-column detail layout (client overview tab): each .col can stack more
   than one .card, so it needs its own gap between them. */
.detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.detail-cols .col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.stat {
  padding: 18px 20px;
}

.stat .k {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.stat .v {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  margin-top: 8px;
  letter-spacing: -0.02em;
}

.stat .v.accent {
  color: var(--accent);
}

.stat .v.success {
  color: var(--success);
}

.stat .v.warning {
  color: var(--warning);
}

.stat .dim {
  font-size: 12px;
  margin-top: 4px;
}

/* A stat tile that is a link (dashboard failure counts → the matching log): reads as
   clickable — chevron in the label row, border + chevron brighten on hover. */
.stat-link {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.stat-link:hover {
  border-color: var(--border-2);
  background: linear-gradient(180deg, var(--surface-2), #0f1626);
  text-decoration: none;
}

.stat-link .k {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stat-link .k svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--text-dim);
  transition: color 0.15s, transform 0.15s;
}

.stat-link:hover .k svg {
  color: var(--text);
  transform: translateX(2px);
}

/* ---------------- Tables ---------------- */
.table-wrap {
  overflow-x: auto;
}

table.tx {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.tx thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
}

table.tx tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

table.tx tbody tr {
  transition: background 0.12s;
}

table.tx tbody tr:hover {
  background: var(--surface-2);
}

table.tx tbody tr:last-child td {
  border-bottom: 0;
}

table.tx .num {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

table.tx .num-r, th.num-r {
  text-align: right;
}

table.tx tr.t-total td {
  border-top: 2px solid var(--border);
}

.t-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 16px;
}

/* Full-page "nothing here" state (e.g. 404), as opposed to .t-empty's in-table row. */
.empty-state {
  text-align: center;
  padding: 48px 16px;
}

.empty-state h2 {
  margin: 0 0 8px;
}

.empty-state .muted {
  margin: 0 0 20px;
}

/* Single-column form pages (account/settings, new-client) narrower than the
   full content width so long forms don't stretch edge to edge. */
.narrow {
  max-width: 640px;
}

/* pager: the prev/next + "page x of y" footer under a table (replaces ad-hoc toolbars) */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.pager-nav {
  display: flex;
  gap: 8px;
}

/* ---------------- Badges ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge.success {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(52, 211, 153, 0.3);
}

.badge.warning {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(251, 191, 36, 0.3);
}

.badge.danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(248, 113, 113, 0.3);
}

.badge.info {
  color: var(--info);
  background: var(--info-soft);
  border-color: rgba(96, 165, 250, 0.3);
}

.badge.neutral {
  color: var(--text-muted);
  background: var(--surface-3);
  border-color: var(--border-2);
}

.badge.plain::before {
  display: none;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s, color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 16px;
  height: 16px;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
  text-decoration: none;
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}

.btn-outline:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: rgba(248, 113, 113, 0.4);
}

.btn-danger:hover {
  background: var(--danger-soft);
  text-decoration: none;
}

.btn-success {
  background: var(--success);
  color: #06281c;
}

.btn-success:hover {
  background: #4ee0a8;
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}

.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.btn-sm {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn:focus-visible {
  box-shadow: var(--ring);
}

/* ---------------- Forms ---------------- */
.field {
  margin-bottom: 16px;
}

.field.full {
  grid-column: 1/-1;
}

.label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.label .req {
  color: var(--accent);
}

.input, .select, textarea.input {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder {
  color: var(--text-dim);
}

.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  outline: none;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2393a1bd' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.help {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---------------- Alerts (flash) ---------------- */
.alert {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  margin-bottom: 14px;
  font-size: 14px;
}

.alert.success {
  color: #b6f3da;
  background: var(--success-soft);
  border-color: rgba(52, 211, 153, 0.3);
}

.alert.danger {
  color: #fecaca;
  background: var(--danger-soft);
  border-color: rgba(248, 113, 113, 0.3);
}

.alert.warning {
  color: #fde9b0;
  background: var(--warning-soft);
  border-color: rgba(251, 191, 36, 0.3);
}

.alert.info {
  color: #cfe3ff;
  background: var(--info-soft);
  border-color: rgba(96, 165, 250, 0.3);
}

/* ---------------- Misc ---------------- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

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

.dim {
  color: var(--text-dim);
}

/* A smaller secondary line under a table cell's main value (e.g. buyer email
   under a name, an error snippet under a status). */
.sub-line {
  font-size: 12px;
  margin-top: 2px;
}

/* A value shown at a slightly smaller size than body text (mono IDs/URLs). */
.mono.sm {
  font-size: 13px;
}

/* Small-caps section label, standalone version of .stat .k for use outside stat tiles. */
.label-sm {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Screen-reader-only text — e.g. the header of an icon-only Actions column. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13.5px;
  margin-bottom: 16px;
  white-space: nowrap;
}

.back svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.back:hover {
  color: var(--text);
  text-decoration: none;
}

.dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px 14px;
}

.dl dt {
  color: var(--text-dim);
  font-size: 13px;
}

.dl dd {
  margin: 0;
  font-size: 14px;
}

/* Compact list of links with a trailing meta value (client detail → published event pages). */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.link-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.link-list li:first-child {
  padding-top: 0;
}

.link-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.link-list a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-list a svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--text-dim);
}

.link-list .meta {
  flex: none;
  font-size: 12.5px;
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* A toolbar sitting inside .page-head (search/filter row beside the page-level
   actions) has no bottom margin of its own — .page-head's gap handles spacing. */
.page-head .toolbar {
  margin: 0;
}

.page-head form.toolbar {
  flex: 1;
}

.spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ---------------- One-time-code (segmented) input ---------------- */
.otp {
  display: flex;
  gap: clamp(6px, 2.2vw, 10px);
}

.otp-fallback[hidden] {
  display: none;
}

.otp-cell {
  flex: 1 1 0;
  min-width: 0;
  height: 54px;
  padding: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.otp-cell:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  outline: none;
  background: var(--surface-3);
}

.otp-cell.filled {
  border-color: var(--accent);
  color: var(--text);
}

/* ---------------- TOTP / 2FA setup ---------------- */
.totp-setup {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.totp-setup.stack {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.totp-qr {
  width: 200px;
  height: 200px;
  flex: none;
  background: #fff;
  padding: 8px;
  border-radius: var(--radius-sm);
}

.totp-manual {
  min-width: 0;
  max-width: 100%;
}

.totp-manual .label {
  margin-bottom: 6px;
}

.totp-key {
  display: inline-block;
  max-width: 100%;
  font-size: 15px;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  word-break: break-word;
}

/* ---------------- Row actions (tables) ---------------- */
.row-actions {
  /* Keep this a real table-cell. display:flex on a <td> strips its
     table-cell box, so it stops stretching to the row height (set by the
     tallest cell) and collapses to its own content. Lay the icon buttons
     out inline instead and right-align them. */
  text-align: right;
  white-space: nowrap;
}

.row-actions > * {
  vertical-align: middle;
  margin: 0;
}

.row-actions > * + * {
  margin-left: 6px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.icon-btn.danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(248, 113, 113, 0.4);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

/* ---------------- Tabs (page-level, e.g. /clients/<id>) ----------------
   Driven by admin.js: it toggles .is-active on .tab and the `hidden`
   attribute on the matching .tab-panel. */
.tabbar {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tabbar::-webkit-scrollbar {
  display: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 11px 14px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tab svg {
  width: 16px;
  height: 16px;
}

.tab:hover {
  color: var(--text);
  text-decoration: none;
}

.tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tab.is-active .tab-count {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Must stay after any .tab-panel display rule so the UA `hidden` default wins. */
.tab-panel[hidden] {
  display: none;
}

/* ---------------- Tooltips ----------------
   admin.js appends a .tooltip div to <body> at document coordinates, then adds
   .show on the next frame (.below when it had to flip under the target). Only
   opacity may transition — the bubble is measured before .show is applied, so
   anything that changes its box size would place it wrong. */
.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 60;
  max-width: 260px;
  padding: 6px 9px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 500;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.tooltip.show {
  opacity: 1;
}

.tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
}

.tooltip:not(.below)::after {
  top: 100%;
  border-top-color: var(--border-2);
}

.tooltip.below::after {
  bottom: 100%;
  border-bottom-color: var(--border-2);
}

/* ---------------- Email template gallery (/email-templates) ---------------- */
.tpl-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.tpl-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--text-dim);
}

.tpl-note code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 5px;
}

.tpl-browser {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 18px;
  align-items: start;
}

.tpl-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  position: sticky;
  top: 18px;
}

.tpl-group {
  padding: 12px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.tpl-group:first-child {
  padding-top: 6px;
}

.tpl-tab {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tpl-tab:hover {
  background: var(--surface-2);
  color: var(--text);
}

.tpl-tab.active {
  background: var(--accent-soft);
  border-color: var(--border-2);
  color: var(--text);
}

.tpl-tab-label {
  font-size: 14px;
  font-weight: 500;
}

.tpl-tab-file {
  font-size: 11.5px;
  color: var(--text-dim);
}

.tpl-pane {
  display: flex;
  flex-direction: column;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.tpl-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.tpl-pane-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.tpl-pane-subject {
  margin-top: 2px;
  font-size: 13px;
}

.tpl-frame {
  flex: 1;
  width: 100%;
  min-height: 620px;
  border: 0;
  background: #f4f4f7;
}

@media (max-width: 860px) {
  .tpl-browser {
    grid-template-columns: 1fr;
  }
  .tpl-list {
    position: static;
  }
}
/* ---------------- Spacing utilities (kept last so they always win) ---------------- */
.mb-18 {
  margin-bottom: 18px;
}

.mb-22 {
  margin-bottom: 22px;
}

/* ---------------- Modals (native <dialog>) ---------------- */
dialog.modal {
  width: min(560px, 100vw - 32px);
  max-width: 560px;
  padding: 0;
  color: var(--text);
  background: linear-gradient(180deg, var(--surface), #0f1626);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

dialog.modal.modal-lg {
  width: min(720px, 100vw - 32px);
  max-width: 720px;
}

dialog.modal::backdrop {
  background: rgba(5, 8, 15, 0.62);
  backdrop-filter: blur(3px);
}

dialog.modal[open] {
  animation: modal-in 0.16s ease;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal-card {
  display: block;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-head h3 {
  font-size: 16px;
  font-weight: 600;
}

.modal-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.modal-x:hover {
  background: var(--surface-2);
  color: var(--text);
}

.modal-x svg {
  width: 18px;
  height: 18px;
}

.modal-body {
  padding: 20px;
  max-height: min(68vh, 600px);
  overflow-y: auto;
}

.modal-body .field:last-child {
  margin-bottom: 0;
}

.modal-body > p:only-child, .modal-body > p[data-modal-text] {
  margin: 0;
}

.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.modal-errors {
  margin: 16px 20px -4px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #fecaca;
  font-size: 13.5px;
}

.modal-errors > div + div {
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow);
  }
  .scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 35;
  }
  body.nav-open .scrim {
    display: block;
  }
  .btn.menu-btn {
    display: inline-flex;
  }
  /* Stat tiles stay 2-up on tablets; .cols-3 was collapsing to a single column. */
  .grid.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.cols-2 {
    grid-template-columns: 1fr;
  }
  .detail-cols {
    grid-template-columns: 1fr;
  }
  .content {
    padding: 20px 16px;
  }
  .topbar {
    padding: 14px 16px;
  }
  /* .page-head: title block on its own line, the toolbar / actions row below it
     (was: title squeezed to "Harbour/FC" beside a ragged stack of buttons). */
  .page-head {
    flex-wrap: wrap;
  }
  .page-head > div:first-child {
    min-width: 0;
  }
  .page-head > .toolbar, .page-head > form.toolbar {
    flex: 1 1 100%;
  }
  /* Scroll hint for wide tables: fade the right edge so a scrollable table doesn't
     look hard-clipped. Two approaches were tried and rejected before this one:
     (1) a background-gradient painted on .table-wrap never showed, because table
     rows/cells are transparent, so the "gradient" just revealed .card's own
     near-identical dark background underneath — no visible contrast; (2) a
     mask-image fade (the .settings-nav technique) has the same problem — masking
     to transparent reveals that same near-identical card background, so the
     "fade" blends away to nothing. An inset box-shadow instead paints a
     semi-transparent black wash ON TOP of whatever's there, so it reads regardless
     of the underlying colour. It's on the border box (not scrolled content), so it
     stays pinned to the visible right edge as you scroll. */
  .table-wrap {
    box-shadow: inset -24px 0 16px -16px rgba(0, 0, 0, 0.55);
  }
}
@media (max-width: 560px) {
  /* Stat tiles stay 2-up on phones (was 1-per-row: 11 tiles ≈ 1870px before any content). */
  .grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat .v {
    font-size: 24px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}