/* Panodock — component layer. Requires tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--pd-page); color: var(--pd-ink);
  font: var(--pd-body); -webkit-font-smoothing: antialiased;
}
a { color: var(--pd-brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--pd-brand-600); outline-offset: 2px; border-radius: 8px; }

/* ---------- type ---------- */
.pd-h1 { font: var(--pd-h1); letter-spacing: -0.03em; margin: 0; }
.pd-h2 { font: var(--pd-h2); letter-spacing: -0.02em; margin: 0; }
.pd-h3 { font: var(--pd-h3); letter-spacing: -0.01em; margin: 0; }
.pd-metric { font: var(--pd-metric); letter-spacing: -0.03em; }
.pd-lede { font-size: 15px; line-height: 1.6; color: var(--pd-ink-2); margin: 0; }
.pd-eyebrow {
  font-family: var(--pd-font-mono); font-size: var(--pd-eyebrow-size);
  letter-spacing: var(--pd-eyebrow-track); text-transform: uppercase;
  color: var(--pd-ink-3);            /* on a white card */
}
.pd-eyebrow--on-tint { color: var(--pd-ink-2); }  /* page ground, sunken, brand tint */
.pd-eyebrow--on-dark { color: var(--pd-ink-4); }  /* #0C0C12 */
.pd-meta {
  font-family: var(--pd-font-mono); font-size: 10.5px;
  letter-spacing: var(--pd-meta-track); color: var(--pd-ink-3);
}

/* ---------- buttons. pill, three ranks, one danger. ---------- */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pd-2);
  height: 38px; padding: 0 var(--pd-4); border-radius: var(--pd-r-btn); border: 0;
  font-family: var(--pd-font-display); font-weight: 600; font-size: 13.5px;
  cursor: pointer; white-space: nowrap;
}
.pd-btn--lg { height: 44px; padding: 0 var(--pd-5); font-size: 14.5px; }
.pd-btn--primary { background: var(--pd-brand-600); color: #FFFFFF; box-shadow: var(--pd-shadow-btn); }
.pd-btn--primary:hover { background: var(--pd-brand-700); }
.pd-btn--dark { background: var(--pd-ink); color: #FFFFFF; }
.pd-btn--dark:hover { background: var(--pd-dark); }
.pd-btn--ghost { background: var(--pd-card); border: 1px solid var(--pd-line-strong); color: var(--pd-ink); }
.pd-btn--ghost:hover { border-color: var(--pd-brand-600); color: var(--pd-brand-700); }
.pd-btn--quiet { background: none; border: 1px solid var(--pd-line-strong); color: var(--pd-ink-2); }
.pd-btn--danger { background: var(--pd-card); border: 1px solid rgba(194,65,90,0.45); color: var(--pd-danger-ink); }
.pd-btn--danger:hover { background: var(--pd-danger-bg); }
.pd-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pd-btn--icon { width: 30px; height: 30px; padding: 0; border-radius: 9px; background: none; color: var(--pd-ink-3); }
.pd-btn--icon:hover { background: var(--pd-page); color: var(--pd-ink); }

/* ---------- cards ---------- */
.pd-card {
  background: var(--pd-card); border: 1px solid var(--pd-line);
  border-radius: var(--pd-r-card); box-shadow: var(--pd-shadow-card);
}
.pd-card--pad { padding: var(--pd-5); }
.pd-card--brand { border: 1.5px solid var(--pd-brand-600); box-shadow: var(--pd-shadow-brand); }
.pd-card--danger { border: 1px solid rgba(194,65,90,0.3); box-shadow: none; }
.pd-card--sunken { background: var(--pd-sunken); border: 0; box-shadow: none; }
.pd-card--dark { background: var(--pd-dark); border: 0; box-shadow: none; color: #FFFFFF; }
.pd-card-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pd-3);
  padding: var(--pd-4) var(--pd-5); border-bottom: 1px solid var(--pd-line);
}
/* interactive card (tour tile) */
.pd-tile { display: block; overflow: hidden; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.pd-tile:hover { transform: translateY(-3px); box-shadow: var(--pd-shadow-hover);
  border-color: var(--pd-brand-500); text-decoration: none; }
.pd-thumb { position: relative; aspect-ratio: 16/10; background: linear-gradient(145deg,#2b3750,#151922); }

/* ---------- chips + badges ---------- */
.pd-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px;
  border-radius: var(--pd-r-chip); background: var(--pd-card);
  border: 1px solid rgba(20,22,34,0.1); font-size: 12.5px; color: var(--pd-ink-2);
}
.pd-chip[aria-pressed="true"], .pd-chip--on { background: var(--pd-ink); color: #FFFFFF; border-color: transparent; }
.pd-chip--brand { background: var(--pd-brand-tint); border: 0; color: var(--pd-brand-700); }
.pd-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 9px;
  border-radius: var(--pd-r-chip); font-family: var(--pd-font-mono);
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.pd-badge--live { background: rgba(16,220,140,0.1); border: 1px solid rgba(16,220,140,0.28); color: var(--pd-live-ink-2); }
.pd-badge--over { background: rgba(12,12,18,0.62); backdrop-filter: blur(6px); color: #FFFFFF; }
.pd-badge--plan { background: var(--pd-sunken); color: var(--pd-ink-2); height: 18px; font-size: 9px; }
.pd-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--pd-live); }
@keyframes pd-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.3); } }
.pd-dot--pulse { animation: pd-pulse 2.2s ease-in-out infinite; }

/* ---------- fields ---------- */
.pd-field {
  width: 100%; height: 42px; padding: 0 14px; border-radius: var(--pd-r-field);
  background: var(--pd-field); border: 1px solid var(--pd-line-strong);
  font: var(--pd-body); color: var(--pd-ink);
}
.pd-field::placeholder { color: var(--pd-ink-3); }
.pd-field:focus { background: var(--pd-card); border-color: var(--pd-brand-500);
  box-shadow: var(--pd-focus); outline: none; }
.pd-field:disabled { opacity: 0.6; cursor: not-allowed; }
.pd-field--invalid { border-color: var(--pd-danger); }
.pd-field--area { height: auto; padding: 12px 13px; line-height: 1.6; resize: vertical; }
.pd-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.pd-hint { display: block; margin-top: 7px; font-size: 12.5px; color: var(--pd-ink-2); }
.pd-search { padding-left: 35px; height: 34px; background: var(--pd-page); border-color: transparent; }

/* ---------- toggle ---------- */
.pd-toggle { display: inline-flex; align-items: center; width: 44px; height: 26px;
  padding: 3px; border-radius: 999px; background: #DCDDE4; flex: 0 0 auto; }
.pd-toggle > span { width: 20px; height: 20px; border-radius: 999px; background: #FFFFFF; }
.pd-toggle[aria-checked="true"] { background: var(--pd-brand-600); }
.pd-toggle[aria-checked="true"] > span { margin-left: auto; }

/* ---------- tabs ---------- */
.pd-tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(20,22,34,0.09); overflow-x: auto; }
.pd-tab { flex: 0 0 auto; height: 40px; padding: 0 15px; background: none; border: 0;
  border-bottom: 2px solid transparent; font-family: var(--pd-font-display);
  font-weight: 600; font-size: 14px; color: var(--pd-ink-2); cursor: pointer; }
.pd-tab[aria-selected="true"] { color: var(--pd-ink); border-bottom-color: var(--pd-brand-600); }

/* ---------- sidebar nav ---------- */
.pd-nav-item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px;
  border-radius: var(--pd-r-field); color: var(--pd-ink-2); font-size: 14px; text-decoration: none; }
.pd-nav-item:hover { background: var(--pd-page); color: var(--pd-ink); text-decoration: none; }
.pd-nav-item[aria-current="page"] { background: var(--pd-brand-tint); color: var(--pd-brand-700); font-weight: 500; }
.pd-nav-count { margin-left: auto; font-family: var(--pd-font-mono); font-size: 11px; color: var(--pd-ink-2); }

/* ---------- meter ---------- */
.pd-meter { height: 6px; border-radius: 999px; background: var(--pd-sunken); overflow: hidden; }
.pd-meter > span { display: block; height: 100%; background: var(--pd-brand-600); }

/* ---------- table ---------- */
.pd-table { width: 100%; border-collapse: collapse; }
.pd-table th { text-align: left; padding: 13px 16px; font-family: var(--pd-font-mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pd-ink-3); font-weight: 400; border-bottom: 1px solid var(--pd-line); }
.pd-table td { padding: 13px 16px; font-size: 13.5px; color: var(--pd-ink-2);
  border-bottom: 1px solid rgba(20,22,34,0.05); }
.pd-table td.pd-hl { color: var(--pd-ink); background: rgba(37,99,235,0.03); }
.pd-row { display: flex; align-items: center; gap: 12px; padding: 11px var(--pd-5);
  border-bottom: 1px solid rgba(20,22,34,0.05); }

/* ---------- modal ---------- */
.pd-scrim { position: fixed; inset: 0; background: var(--pd-scrim);
  display: flex; align-items: center; justify-content: center; padding: 40px 24px; z-index: 100; }
.pd-modal { width: 100%; max-width: 520px; background: var(--pd-card);
  border-radius: var(--pd-r-modal); box-shadow: var(--pd-shadow-modal); overflow: hidden; }

/* ---------- dropzone ---------- */
.pd-drop { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--pd-3); padding: 44px 22px; border-radius: var(--pd-r-card);
  border: 1.5px dashed rgba(37,99,235,0.4); background: rgba(37,99,235,0.03); cursor: pointer; }
.pd-drop:hover { border-color: var(--pd-brand-600); background: rgba(37,99,235,0.06); }

/* ---------- skeleton ---------- */
.pd-skel { border-radius: 999px; background: var(--pd-sunken); }

/* ---------- utility ---------- */
.pd-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pd-sr { position: absolute; left: -9999px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ==========================================================================
   ROUND 2 ADDITIONS
   ========================================================================== */

/* ---------- dense data table (/admin/users only) --------------------------
   Denser than the rest of the app on purpose: 8px row padding vs 11-13,
   monospaced numerals so columns align on the digit, header pinned, and the
   horizontal scroll trapped inside .pd-dtable-scroll so the PAGE never
   scrolls sideways on a narrow screen. Long values truncate; nothing wraps,
   so a 74-char name and a 7-digit number cannot change row height. */
.pd-dtable-frame {
  background: var(--pd-card); border: 1px solid var(--pd-line);
  border-radius: 14px; box-shadow: var(--pd-shadow-card); overflow: hidden;
}
.pd-dtable-scroll { overflow-x: auto; overflow-y: auto; max-height: 560px; }
.pd-dtable { width: 100%; border-collapse: separate; border-spacing: 0; }
.pd-dtable--wide { min-width: 1180px; }   /* workspaces, 10 columns */
.pd-dtable--std  { min-width: 900px; }    /* users, 7 columns */
.pd-dtable thead th {
  position: sticky; top: 0; z-index: 2; background: var(--pd-field);
  text-align: left; padding: 9px 14px; white-space: nowrap; font-weight: 400;
  font-family: var(--pd-font-mono); font-size: 9px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--pd-ink-2);
  border-bottom: 1px solid rgba(20, 22, 34, 0.1);
}
.pd-dtable th.pd-num, .pd-dtable td.pd-num { text-align: right; }
/* the column currently sorted — also carries aria-sort on the th */
.pd-dtable thead th[aria-sort] {
  background: rgba(37, 99, 235, 0.06); color: var(--pd-brand-700);
  border-bottom-color: rgba(37, 99, 235, 0.28); cursor: pointer;
}
.pd-dtable tbody td {
  padding: 8px 14px; font-size: 13px; color: var(--pd-ink);
  border-bottom: 1px solid rgba(20, 22, 34, 0.05); white-space: nowrap;
}
.pd-dtable tbody td.pd-sorted { background: rgba(37, 99, 235, 0.03); }
.pd-dtable tbody tr.pd-row-self { background: rgba(37, 99, 235, 0.03); }
.pd-dtable tbody tr.pd-row-danger { background: var(--pd-danger-bg); }
.pd-mono { font-family: var(--pd-font-mono); font-size: 12px; }
.pd-mono--sm { font-family: var(--pd-font-mono); font-size: 11.5px; color: var(--pd-ink-3); }
.pd-cell-2 { white-space: normal; }
.pd-cell-2 > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-cell-cap { max-width: 250px; }        /* name / subdomain */
.pd-cell-cap--sm { max-width: 190px; }    /* owner email */
/* plan select, editable in the row */
.pd-inline-select {
  height: 28px; padding: 0 26px 0 9px; border-radius: 8px; appearance: none;
  background: var(--pd-card); border: 1px solid var(--pd-line-strong);
  font-family: var(--pd-font-body); font-size: 12.5px; color: var(--pd-ink); cursor: pointer;
}
.pd-inline-select:focus { border-color: var(--pd-brand-500); box-shadow: var(--pd-focus); outline: none; }
/* full-width confirm strip: a <tr> whose single <td colspan> holds this */
.pd-row-confirm {
  display: flex; align-items: center; gap: var(--pd-4); flex-wrap: wrap;
  padding: 14px 16px; background: var(--pd-danger-bg);
  border-top: 1px solid rgba(194, 65, 90, 0.22);
}
.pd-dtable-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pd-3);
  flex-wrap: wrap; padding: 11px 16px; background: var(--pd-field);
  border-top: 1px solid var(--pd-line);
}

/* ---------- error page template ------------------------------------------
   One shell, five contents. .pd-err-code carries the tone instead of an
   illustration. Never add an illustration or an exclamation mark here. */
.pd-err { min-height: 100vh; display: flex; flex-direction: column; }
.pd-err-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 36px 28px; }
.pd-err-code {
  font-family: var(--pd-font-mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--pd-ink-3);
}
.pd-err-code--warn   { color: var(--pd-warn-ink); }
.pd-err-code--danger { color: var(--pd-danger-ink); }
.pd-err-title { font: 700 24px/1.15 var(--pd-font-display); letter-spacing: -0.03em; margin: 12px 0 0; text-wrap: pretty; }
.pd-err-text  { margin: 10px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--pd-ink-2); }
.pd-err-ref   { margin: 16px 0 0; font-family: var(--pd-font-mono); font-size: 11px; color: var(--pd-ink-3); }
/* visitor-facing cut: wears the studio identity, sits in share-page chrome */
.pd-err--tenant { background: var(--pd-page); }
.pd-err--tenant .pd-err-body { align-items: center; }
/* white-label: hide the Panodock credit bar, keep everything else */
.pd-err--whitelabel .pd-poweredby { display: none; }

/* ---------- print ---------------------------------------------------------
   Applies to the performance report and to any panel-based page. */
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #FFFFFF !important; }
  .pd-noprint, .pd-btn, nav, header.pd-topbar { display: none !important; }
  .pd-sheet { max-width: none !important; padding: 0 !important; }
  .pd-card, .pd-panel {
    box-shadow: none !important; border: 1px solid #C9CBD4 !important;
    border-radius: 0 !important; background: #FFFFFF !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .pd-card--dark, .pd-card--sunken { background: #FFFFFF !important; color: #000000 !important; }
  .pd-break { break-before: page; page-break-before: always; }
  /* charts: drop the fill, ink the line, so a mono printer still reads it */
  .pd-chart-area { fill: none !important; }
  .pd-chart-line { stroke: #000000 !important; }
  .pd-chart-bar, .pd-meter > span { background: #000000 !important; fill: #000000 !important; }
  .pd-meter { border: 1px solid #C9CBD4; }
  a { color: #000000 !important; text-decoration: none !important; }
  .pd-table td, .pd-dtable tbody td { color: #000000 !important; }
  .pd-dtable-scroll { overflow: visible !important; max-height: none !important; }
  .pd-dtable thead th { position: static !important; }
}