/* ADMIN: the owner's page (`js/admin.js`). The app's own look: ink on paper, hard lines, no colour but the one
   that means a fault. */

.mode.adminmode {
  margin-left: 14px;
  box-shadow: 0 0 0 1px var(--err-90);
  color: var(--err-90);
}
.mode.adminmode:hover { color: var(--err-90); }
.mode.adminmode.on { background: var(--err-90); color: var(--on-fill); box-shadow: 0 0 0 1px var(--err-90); }
.mode.adminmode .admin-count { margin-left: 6px; font-weight: 400; }

.admin {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--admin-top, 44px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--screen);
  border-top: 1px solid var(--err-90);
}
.admin[hidden] { display: none; }

.admin-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.admin-tab {
  padding: 5px 12px;
  border: 1px solid var(--line);
  background: none;
  font: var(--t-label)/1 var(--label);
  letter-spacing: .1em;
  cursor: pointer;
}
.admin-tab.on { background: var(--emit-100); color: var(--on-fill); border-color: var(--emit-100); }

.admin-body { flex: 1; overflow: auto; padding: 12px 14px 40px; }

.adm-none { color: var(--emit-50); font: var(--t-label) var(--label); letter-spacing: .08em; margin: 10px 0; }
.adm-none.bad, .adm-line.bad { color: var(--err-90); }

.adm-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.adm-tile { min-width: 84px; padding: 8px 10px; border: 1px solid var(--line-firm); background: var(--raised); }
.adm-tile b { display: block; font: 700 18px/1.1 var(--mono); }
.adm-tile span { font: var(--t-label) var(--label); letter-spacing: .08em; color: var(--emit-50); }
.adm-tile.bad { border-color: var(--err-90); }
.adm-tile.bad b { color: var(--err-90); }

.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-bottom: 14px; }
.adm-fig { margin: 0; padding: 6px 8px; border: 1px solid var(--line); }
.adm-fig figcaption { display: flex; gap: 8px; align-items: baseline; font: var(--t-label) var(--label); letter-spacing: .08em; }
.adm-fig figcaption b { font: 700 13px var(--mono); }
.adm-fig figcaption i { margin-left: auto; font: 11px var(--mono); color: var(--emit-50); font-style: normal; }
.adm-chart { width: 100%; height: 54px; display: block; }
.adm-chart polyline { fill: none; stroke: var(--emit-100); stroke-width: 1; }
.adm-chart circle { fill: var(--emit-100); }

.adm-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 14px; }
.admin h3 { margin: 0 0 6px; font: var(--t-label) var(--label); letter-spacing: .1em; color: var(--emit-50); }
.adm-line { margin: 2px 0; font: 12px var(--mono); }
.adm-wide { margin-top: 6px; }

.adm-bars { display: grid; gap: 3px; }
.adm-bar { position: relative; display: flex; justify-content: space-between; gap: 8px; font: 12px var(--mono); padding: 1px 4px; }
.adm-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--emit-30); z-index: 0; }
.adm-bar span, .adm-bar b { position: relative; z-index: 1; font-weight: 400; }

.adm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.adm-chip { padding: 2px 8px; border: 1px solid var(--line); background: none; font: 11px var(--mono); cursor: pointer; }
.adm-chip.on { background: var(--emit-100); color: var(--on-fill); }
.adm-chip.off { border-color: var(--err-90); color: var(--err-90); }
.adm-bar-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.adm-bar-row .input { min-width: 240px; }
/* Wrapped: on a phone COPY BUG REPORT, SET PLAN and SET SEATS ran out of the page. */
.adm-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }

.adm-table { width: 100%; border-collapse: collapse; font: 12px var(--mono); }
.adm-table th { text-align: left; padding: 4px 8px; font: var(--t-label) var(--label); letter-spacing: .08em; color: var(--emit-50); border-bottom: 1px solid var(--line-firm); white-space: nowrap; }
.adm-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table .n { text-align: right; white-space: nowrap; }
.adm-table .wide { width: 40%; word-break: break-word; }
.adm-table tr.pick { cursor: pointer; }
.adm-table tr.pick:hover td { background: var(--well); }
.adm-table tr.detail > td { background: var(--well); padding: 6px 10px 10px; }

.adm-dot { display: inline-block; width: 9px; height: 9px; border: 1px solid var(--line-firm); border-radius: 50%; }
.adm-dot.new { background: var(--err-90); border-color: var(--err-90); }
.adm-dot.seen { background: var(--emit-50); }
.adm-dot.fixed { background: none; }

/* Viewing another account's design: a red frame on the whole window, and the way out. Over the page, never in
   its layout. */
body.viewing .toolbar .saved,
body.viewing .toolbar .held { visibility: hidden; }

/* Nothing here can be used while viewing (`js/inert.js`): what edits is not drawn. */
body.viewing #dock,
body.viewing #undo-btn,
body.viewing #redo-btn,
body.viewing #last-colour,
body.viewing #stage-new,
body.viewing #add-menu,
body.viewing #files-btn,
body.viewing #recent { display: none; }
body.viewing #panel-right,
body.viewing .heel-panel,
body.viewing #pieces-rail,
body.viewing #ctx-last { cursor: default; user-select: none; }

body.viewing::after {
  content: '';
  position: fixed;
  inset: 0;
  border: 3px solid var(--err-90);
  pointer-events: none;
  z-index: 9000;
}
.viewing-tag {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9001;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 3px 6px 3px 12px;
  background: var(--err-90);
  color: var(--on-fill);
  font: var(--t-label) var(--label);
  letter-spacing: .08em;
  white-space: nowrap;
}
.viewing-tag .key { padding: 2px 8px; }
/* Where the bar has no room in its middle, the tag is across the foot of the window: on top it covered the size and
   the modes from 1280 px down, and on a phone EXIT was off the screen. */
@media (max-width: 1400px) {
  .viewing-tag {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: calc(3px + env(safe-area-inset-bottom));
    white-space: normal;
  }
}

.adm-sub { color: var(--emit-50); font-style: normal; }
button.adm-bar { width: 100%; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
button.adm-bar:hover { background: var(--well); }
.adm-table input.seats { width: 90px; }
#plan-days { width: 76px; }
#plan-note { min-width: 200px; }
#plan-say, #requests-say, #workspaces-say { min-height: 1.4em; }
.admin-pane > section { margin-bottom: 18px; }
#plan-tier { min-width: 110px; }
#plan-until, .adm-actions input[type=date] { min-width: 140px; }
.viewing-tag .viewing-say { min-width: 6ch; }

/* A fault's page. */
.adm-title { font: 700 14px var(--mono); word-break: break-word; }
.adm-facts .adm-line { display: flex; gap: 8px; word-break: break-word; }
.adm-facts .adm-line span { flex: 0 0 82px; color: var(--emit-50); font: var(--t-label) var(--label); letter-spacing: .08em; }
.adm-cols.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.adm-pre { margin: 0; padding: 8px 10px; max-height: 280px; overflow: auto; border: 1px solid var(--line); background: var(--well); font: 11px/1.45 var(--mono); white-space: pre-wrap; word-break: break-all; }
.adm-crumbs { margin: 0; padding: 0; list-style: none; font: 12px var(--mono); }
.adm-crumbs li { padding: 1px 0; }
.adm-crumbs li.bad { color: var(--err-90); }
.adm-crumbs i { display: inline-block; min-width: 4ch; color: var(--emit-50); font-style: normal; }
.adm-crumbs span { color: var(--emit-50); }
.adm-table tr.on td { background: var(--well); }