/* The admin (templates/admin/) — the portal's design system (ui.css), told
   apart at a glance: an indigo rail with an amber accent instead of the
   customers' ink and mint, an "Admin" badge and the instance's label, and
   the components a console needs on top — tabs, dense tables, key/value
   grids, search results, a results page for the ERP actions. */

.surface-admin {
  --rail: #0d1446;
  --rail-bg:
    radial-gradient(120% 45% at 0% 0%, rgba(255, 196, 87, 0.18), transparent 70%),
    radial-gradient(110% 40% at 100% 100%, rgba(59, 216, 149, 0.14), transparent 70%),
    linear-gradient(180deg, #24349f 0%, #17226f 45%, #0d1446 100%);
  --admin-accent: #ffc457;
  --admin-accent-ink: #3a2600;
  --paper-bg: linear-gradient(150deg, #eef0fb 0%, #f4f6f9 45%, #eef6f2 100%);
}
@media (prefers-color-scheme: dark) {
  .surface-admin {
    --rail: #080c31;
    --rail-bg:
      radial-gradient(120% 45% at 0% 0%, rgba(255, 196, 87, 0.12), transparent 70%),
      radial-gradient(110% 40% at 100% 100%, rgba(59, 216, 149, 0.1), transparent 70%),
      linear-gradient(180deg, #172172 0%, #0f1650 50%, #080c31 100%);
    --paper-bg: linear-gradient(150deg, #0a1030 0%, #081322 50%, #061e1a 100%);
  }
}

/* ============ the rail ============ */
.surface-admin .rail-nav a[aria-current="page"] {
  background: rgba(255, 196, 87, 0.16); color: #fff;
  box-shadow: inset 3px 0 0 var(--admin-accent);
}
.surface-admin .rail-avatar { background: var(--admin-accent); color: var(--admin-accent-ink); }
.rail-admin { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3) var(--s3); flex-wrap: wrap; }
.rail-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 7px; border-radius: var(--pill);
  background: var(--admin-accent); color: var(--admin-accent-ink);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.rail-badge .ico { width: 14px; height: 14px; }
.env-chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--pill);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16); color: #fff;
}
.env-prod, .env-production { background: #e5484d; color: #fff; }
.env-stage, .env-staging { background: #f5a524; color: #2b1a00; }
.env-dev, .env-local, .env-development { background: rgba(255, 255, 255, 0.22); color: #fff; }
.rail-search { padding: 0 var(--s1) var(--s4); }
.rail-search .input-icon > .ico { color: rgba(255, 255, 255, 0.55); }
.rail-search input[type="search"] {
  height: 2.25rem; font-size: 0.88rem; color: #fff;
  background: rgba(255, 255, 255, 0.1); border-color: transparent;
}
.rail-search input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.rail-search input[type="search"]:focus { border-color: var(--admin-accent); box-shadow: 0 0 0 3px rgba(255, 196, 87, 0.25); background: rgba(255, 255, 255, 0.14); }
.rail-search .input-icon:focus-within > .ico { color: var(--admin-accent); }

/* the login: the panel in the admin's indigo, the badge by the wordmark */
.surface-admin .auth-panel { background: linear-gradient(180deg, #24349f 0%, #121b5c 100%); }
.surface-admin .auth-brand { display: flex; align-items: center; gap: var(--s3); }
.auth-badge { font-size: 0.68rem; }
.surface-admin .auth-panel .btn-primary { background: var(--admin-accent); color: var(--admin-accent-ink); }
.surface-admin .auth-panel .btn-primary:hover { background: #ffb42e; color: var(--admin-accent-ink); }
.surface-admin .auth-links { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; text-align: left; }

/* ============ page pieces ============ */
.page-wide { max-width: none; }
.surface-admin .page { max-width: 96rem; }
.crumbs { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); font-size: 0.88rem; color: var(--slate); flex-wrap: wrap; }
.crumbs a { color: var(--slate); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--text); }
.crumbs .ico { width: 14px; height: 14px; }
.title-chips { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.head-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.head-actions form { margin: 0; }

/* tabs under an entity's header */
.tabs {
  display: flex; gap: var(--s1); margin: 0 0 var(--s5); padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  overflow-x: auto; scrollbar-width: none; box-shadow: var(--shadow-sm);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  display: inline-flex; align-items: center; gap: var(--s2); flex: none;
  padding: 8px 14px; border-radius: var(--radius-control);
  color: var(--slate); font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.tabs a:hover { color: var(--text); background: var(--surface-2); }
.tabs a[aria-current="page"] { color: var(--text); background: var(--signal-wash); }
.tabs .ico { width: 16px; height: 16px; }
.tabs .count { padding: 0 8px; font-size: 0.75rem; }

/* a key/value grid, denser than the portal's deflist */
.kv { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; }
.kv dt { color: var(--slate); font-size: 0.86rem; padding-top: 1px; }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.kv dd .sub { font-weight: 400; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: start; margin-bottom: var(--s5); }
.cards-3 > .panel + .panel, .cards-2 > .panel + .panel { margin-top: 0; }

/* dense tables: the admin shows more columns */
table.dense tbody td { padding-top: var(--s3); padding-bottom: var(--s3); }
table.dense thead th, table.dense tbody td { padding-left: var(--s3); padding-right: var(--s3); }
table.dense thead th:first-child, table.dense tbody td:first-child { padding-left: var(--s5); }
.num-pair { white-space: nowrap; }
.num-pair small { color: var(--faint); font-size: 0.8rem; }
.err-n { color: var(--danger); font-weight: 600; }
.row-link a.row-main { color: var(--text); text-decoration: none; font-weight: 600; }
.row-link a.row-main:hover { color: var(--signal); }
tr.is-deleted td { opacity: 0.6; }

/* filter bars above a list: the search grows, the selects keep a width,
   the button at the end */
.list-filters {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
}
.list-filters > .field { flex: 0 1 13rem; min-width: 10rem; }
.list-filters > .field:first-child { flex: 1 1 18rem; }
.list-filters .field + .field { margin-top: 0; }
.list-filters .filters-actions { margin-left: auto; }
.check-inline { display: inline-flex; align-items: center; gap: var(--s2); font-size: 0.88rem; color: var(--slate); white-space: nowrap; height: var(--ctrl); }
.check-inline input { width: 16px; height: 16px; accent-color: var(--signal); }

/* forms on pages of their own (an organization, a user, an entry) */
.form-page { max-width: 58rem; }
.form-card + .form-card { margin-top: var(--s5); }
.form-card .panel-head { min-height: 3.2rem; }
.form-card .panel-body { display: flex; flex-direction: column; gap: var(--s4); }
.form-card .panel-body .field + .field { margin-top: 0; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.form-grid-3 .field + .field { margin-top: 0; }
textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  padding: var(--s3); resize: vertical; min-height: 6rem;
}
textarea.code { font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; }
textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); }
input[type="search"], input[type="tel"], input[type="number"] {
  height: var(--ctrl); width: 100%; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-control); padding: 0 var(--s3);
}
.input-icon > input[type="search"] { padding-left: 42px; }
.choice-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.choice-card {
  position: relative; display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: 12px;
  cursor: pointer; background: var(--surface);
}
.choice-card:has(input:checked) { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); }
.choice-card input { margin-top: 4px; accent-color: var(--signal); }
.choice-card b { display: block; font-size: 0.92rem; }
.choice-card span { display: block; color: var(--slate); font-size: 0.82rem; line-height: 1.4; }
.form-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); }
.secret-state { display: inline-flex; align-items: center; gap: var(--s2); font-size: 0.86rem; color: var(--mint-deep); font-weight: 600; }
.secret-state .ico { width: 16px; height: 16px; }
.settings-json { margin: 0; padding: var(--s3) var(--s4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); font-size: 0.82rem; overflow-x: auto; }

/* the overview */
.attention { list-style: none; margin: 0; padding: var(--s2) var(--s3) var(--s3); }
.attention li a, .attention li > div {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--s3); align-items: start;
  padding: var(--s2) var(--s3); border-radius: var(--radius-control); color: var(--text); text-decoration: none;
}
.attention li a:hover { background: var(--surface-2); }
.attention .ico { margin-top: 2px; }
.attention .is-bad .ico { color: var(--danger); }
.attention .is-warn .ico { color: var(--amber); }
.attention .is-ok .ico { color: var(--mint-deep); }
.attention .meta { color: var(--faint); font-size: 0.82rem; white-space: nowrap; }
.attention .line { display: block; font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention .line + .sub { margin-top: 1px; }
.empty-note { padding: var(--s5); color: var(--slate); font-size: 0.9rem; margin: 0; }
.plugins { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s4) var(--s5); }

/* search results */
.hits { list-style: none; margin: 0; padding: var(--s2) var(--s3) var(--s3); }
.hits a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); border-radius: var(--radius-control); color: var(--text); text-decoration: none; }
.hits a:hover { background: var(--surface-2); }
.hit-ico { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--signal-wash); color: var(--signal-deep); }
.hit-ico .ico { width: 18px; height: 18px; }
.hit-kind { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }

/* the ERP actions' results */
.result-card + .result-card { margin-top: var(--s4); }
.result-alert { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--radius-control); margin: 0 0 var(--s2); font-size: 0.9rem; font-weight: 500; overflow-wrap: anywhere; }
.result-alert .ico { margin-top: 1px; flex: none; }
.result-success { background: var(--mint-wash); color: var(--mint-deep); }
.result-info { background: var(--signal-wash); color: var(--signal-deep); }
.result-warning { background: var(--amber-wash); color: var(--amber); }
.result-danger { background: var(--danger-wash); color: var(--danger); }

/* the token's one showing (admin) */
.surface-admin .issued { padding: var(--s6); }

.audit-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filter-grid-wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .cards-3 { grid-template-columns: 1fr; }
  .audit-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice-cards { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .rail-admin { padding: 0; order: 1; }
  .rail-search { order: 4; flex: 1 0 100%; padding: 0; }
  .list-filters { grid-template-columns: 1fr 1fr; }
  .form-grid-3 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px var(--s3); }
  .kv dd { margin-bottom: var(--s2); }
}
@media (max-width: 680px) {
  .audit-grid-4, .filter-grid-wide { grid-template-columns: 1fr; }
  .list-filters { grid-template-columns: 1fr; }
}

/* a stat card that is a link */
a.stat-link { display: block; color: inherit; text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s; }
a.stat-link:hover { border-color: var(--signal); }
a.stat-link .d { color: var(--faint); }
.stat .v.v-sm { font-size: 1.15rem; font-weight: 700; letter-spacing: 0; padding-top: 0.35rem; }
.form-page .alert { margin-bottom: var(--s5); }
.num-pair small.err-n { color: var(--danger); }
/* three cards abreast: the labels narrower, the ERP card a little wider */
.cards-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); }
.cards-3 .kv { grid-template-columns: 7.5rem minmax(0, 1fr); }
.kv dd.mono, .kv dd .mono { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .cards-3 { grid-template-columns: 1fr; } }
/* long ERP messages in the attention list: two lines, the rest a click away */
.attention .sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* the 404 page */
.lost { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); }
.lost-card { max-width: 30rem; padding: var(--s7) var(--s6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.lost-card .lede { margin: 0; }
.lost-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--signal-wash); color: var(--signal-deep); }
.lost-ico .ico { width: 26px; height: 26px; }

/* ============ the review's polish ============ */
/* links inside tables and key/value lists: quiet until hovered */
.surface-admin td a:not(.btn):not(.icon-btn),
.surface-admin .kv a,
.surface-admin .crumbs a { text-decoration: none; font-weight: 500; }
.surface-admin td a:not(.btn):not(.icon-btn):hover,
.surface-admin .kv a:hover { text-decoration: underline; }
/* a person's own page: a bigger avatar beside the name */
.head-row .person > .avatar { width: 3.5rem; height: 3.5rem; border-radius: 16px; font-size: 1.05rem; }
.head-row .person { align-items: flex-start; gap: var(--s4); }
/* the ERP connection: the facts beside the settings, never clipped */
.erp-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s5); align-items: start; }
.erp-card .settings-json { margin-top: var(--s2); white-space: pre; }
/* table cells that should not wrap into towers */
td.cell-name { min-width: 10rem; }
td.cell-org a { display: block; max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the activity's four rankings: two abreast, the names readable */
.audit-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .erp-card { grid-template-columns: minmax(0, 1fr); }
  .list-filters > .field, .list-filters > .field:first-child { flex: 1 1 100%; }
  .list-filters .filters-actions { margin-left: 0; }
}
@media (max-width: 680px) {
  .audit-grid-4 { grid-template-columns: 1fr; }
}

/* the badge's words stay one line; the settings never widen the page */
.rail-badge { white-space: nowrap; }
.erp-card > * { min-width: 0; }
.settings-json { max-width: 100%; overflow-x: auto; }