/* BWS Tools Admin Portal - plain, no CDN, no framework.
   Same CSS custom properties the auth kit's own pages fall back to
   (auth/routes.js BASE_STYLE), so the login/change-password/admin/users
   screens and this page share one look without any override needed. */

:root {
  --bg: #f3f5f7;
  --fg: #1b2430;
  --muted: #5b6875;
  --card: #ffffff;
  --border: #d5dde4;
  --accent: #0b5cab;
  --accent-fg: #ffffff;
  --danger: #b3261e;
  --ok: #136c3a;
  --radius: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
}

.portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.portal-header h1 {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
}

.portal-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--muted);
}

.portal-header-right a { color: var(--accent); text-decoration: underline; }

.portal-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.portal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.portal-card h2 {
  font-size: 0.95rem;
  margin: 0 0 12px;
  font-weight: 600;
}

.portal-notice {
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.88rem;
}

.portal-notice.ok { border-color: var(--ok); color: var(--ok); background: rgba(19, 108, 58, 0.07); }
.portal-notice.error { border-color: var(--danger); color: var(--danger); background: rgba(179, 38, 30, 0.07); }

.portal-secret {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.95rem;
  background: rgba(0, 0, 0, 0.06);
  padding: 3px 6px;
  border-radius: 4px;
  word-break: break-all;
}

.portal-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.portal-form input[type="email"],
.portal-form input[type="text"],
.portal-form select,
#auditApp {
  font: inherit;
  font-size: 0.9rem;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
  color: inherit;
}

.portal-checks {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  font-size: 0.85rem;
}

.portal-checks legend { font-size: 0.78rem; color: var(--muted); padding: 0 4px; }
.portal-checks label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }

.portal-btn {
  font: inherit;
  font-size: 0.9rem;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: var(--accent);
  color: var(--accent-fg);
  cursor: pointer;
  font-weight: 600;
}

.portal-btn:hover { filter: brightness(1.08); }

.portal-btn-quiet {
  font: inherit;
  font-size: 0.82rem;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.portal-btn-quiet.danger { color: var(--danger); border-color: var(--danger); }

.portal-tablewrap { overflow-x: auto; }

.portal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.portal-table th,
.portal-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.portal-table th { color: var(--muted); font-weight: 600; }

.portal-table select { font: inherit; font-size: 0.82rem; padding: 3px 4px; }

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

.portal-inline { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }

.portal-audit {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.04);
  padding: 10px 12px;
  border-radius: calc(var(--radius) - 2px);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-all;
}

.portal-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  border: 1px solid var(--border);
}

.portal-pill.disabled { color: var(--danger); border-color: var(--danger); }
.portal-pill.admin { color: var(--accent); border-color: var(--accent); }

/* --- launcher tiles: one per tool, link + QR of its address --------------- */

.portal-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 12px;
}

.portal-card h2 button {
  float: right;
  font-weight: 400;
}

.portal-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.portal-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.portal-tile.self { border-color: var(--accent); }
.portal-tile.unconfigured { opacity: 0.6; }

.portal-tile-qr {
  width: 148px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-tile-qr svg { width: 100%; height: 100%; }

.portal-tile-noqr {
  font-size: 0.72rem;
  color: var(--danger);
  line-height: 1.3;
}

.portal-tile-name {
  font-size: 0.85rem;
  font-weight: 600;
}

.portal-tile-link {
  font-size: 0.72rem;
  color: var(--accent);
  word-break: break-all;
}

.portal-tile-notconfigured {
  color: var(--muted);
  font-style: italic;
}

/* --- the printed sheet ---------------------------------------------------
   "Print this sheet" adds .printing-tools to <body>: everything except the
   tools card is hidden, so what comes out of the printer is one page of names
   and codes and nothing else. No popup window to be blocked, and no second
   fetch of ten QR codes that might not finish before print() fires. */
@media print {
  body.printing-tools .portal-header,
  body.printing-tools .portal-notice,
  body.printing-tools .portal-main > .portal-card:not(#toolsCard),
  body.printing-tools #printTools,
  body.printing-tools .portal-hint {
    display: none !important;
  }

  body.printing-tools {
    background: #fff;
  }

  body.printing-tools .portal-main {
    padding: 0;
  }

  body.printing-tools #toolsCard {
    border: 0;
    padding: 0;
  }

  body.printing-tools .portal-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  body.printing-tools .portal-tile {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.printing-tools .portal-tile-qr {
    width: 120px;
    height: 120px;
  }
}