/* ============================================================================
   QUDS — component layer.
   CAMPAIGNPROOF-QUDS-UI-SPRINT-01
   ----------------------------------------------------------------------------
   Styles the existing CampaignProof class vocabulary (.card, .pill, .banner,
   .formgrid, .tabbar, …) so that markup rendered by the untouched page
   scripts adopts QUDS without any behavioural change. Consumes semantic
   tokens from quds-tokens.css only — no raw palette values here.
   ========================================================================== */

/* --- Typography ----------------------------------------------------------- */

h1 {
  font-size: var(--quds-text-page);
  line-height: var(--quds-leading-tight);
  color: var(--quds-text);
  margin: 0 0 var(--quds-space-1);
  letter-spacing: -0.01em;
}
h2 {
  font-size: var(--quds-text-section);
  line-height: var(--quds-leading-tight);
  color: var(--quds-text);
  margin: 0 0 var(--quds-space-3);
}
h3 {
  font-size: var(--quds-text-card);
  line-height: var(--quds-leading-tight);
  color: var(--quds-text);
  margin: var(--quds-space-4) 0 var(--quds-space-2);
}
h3:first-child { margin-block-start: 0; }

p { margin: var(--quds-space-2) 0; }

.muted { color: var(--quds-text-muted); }
.small { font-size: var(--quds-text-small); }
.small.muted, .muted.small { color: var(--quds-text-muted); }

.danger { color: var(--quds-danger); font-weight: 600; }
.success, .ok, .good { color: var(--quds-success); font-weight: 600; }
.bad { color: var(--quds-danger); font-weight: 600; }

a { color: var(--quds-action-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--quds-action-primary-hover); }

code {
  font-family: var(--quds-font-mono);
  font-size: 0.9em;
  background: var(--quds-surface-inset);
  border-radius: var(--quds-radius-xs);
  padding: 1px 5px;
  overflow-wrap: anywhere;
}
pre {
  font-family: var(--quds-font-mono);
  font-size: var(--quds-text-meta);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--quds-surface-inset);
  border: 1px solid var(--quds-border);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-3);
}

details > summary { cursor: pointer; color: var(--quds-text-secondary); }
details > summary:hover { color: var(--quds-text); }

/* --- Cards ----------------------------------------------------------------- */

.card {
  background: var(--quds-surface);
  border: 1px solid var(--quds-border);
  border-radius: var(--quds-radius);
  padding: var(--quds-space-5);
  margin: var(--quds-space-4) 0;
  box-shadow: var(--quds-shadow-1);
}
.card .card {
  /* nested cards (autopilot detail blocks) read as inset panels */
  background: var(--quds-surface);
  border-radius: var(--quds-radius-sm);
  box-shadow: none;
  padding: var(--quds-space-4);
}

/* --- Buttons ----------------------------------------------------------------
   Default <button>  = primary action (calm brand teal).
   button.secondary  = outlined secondary.
   button.danger     = destructive (always visually separated).
   td button         = compact quiet row action.
   Accent orange is NOT the default button colour by design. */

button {
  font: inherit;
  font-size: var(--quds-text-body);
  font-weight: 600;
  min-height: var(--quds-control-height);
  padding: var(--quds-space-2) var(--quds-space-4);
  border-radius: var(--quds-radius-sm);
  border: 1px solid var(--quds-action-primary);
  background: var(--quds-action-primary);
  color: var(--quds-text-invert);
  cursor: pointer;
  transition: background-color var(--quds-duration-fast) var(--quds-ease),
              border-color var(--quds-duration-fast) var(--quds-ease);
}
button:hover { background: var(--quds-action-primary-hover); border-color: var(--quds-action-primary-hover); }
button:active { background: var(--quds-action-primary-pressed); border-color: var(--quds-action-primary-pressed); }

button.secondary {
  background: var(--quds-surface);
  color: var(--quds-action-primary);
  border: 1px solid var(--quds-border-strong);
}
button.secondary:hover { background: var(--quds-surface-inset); border-color: var(--quds-action-primary); }
button.secondary:active { background: var(--quds-info-surface); }

button.danger {
  background: var(--quds-danger);
  border-color: var(--quds-danger);
  color: var(--quds-text-invert);
}
button.danger:hover, button.danger:active { background: var(--quds-danger-strong); border-color: var(--quds-danger-strong); }

button.quds-accent {
  background: var(--quds-action-accent);
  border-color: var(--quds-action-accent);
  color: var(--quds-text-invert);
}
button.quds-accent:hover { background: var(--quds-action-accent-hover); border-color: var(--quds-action-accent-hover); }
button.quds-accent:active { background: var(--quds-action-accent-pressed); border-color: var(--quds-action-accent-pressed); }

button:disabled, button:disabled:hover {
  background: var(--quds-disabled-bg);
  border-color: var(--quds-disabled-bg);
  color: var(--quds-disabled-text);
  cursor: not-allowed;
}

/* Compact quiet row actions inside tables. */
td button {
  min-height: 32px;
  padding: 3px var(--quds-space-3);
  font-size: var(--quds-text-small);
  font-weight: 600;
  background: var(--quds-surface);
  color: var(--quds-action-primary);
  border: 1px solid var(--quds-border-strong);
  margin: 2px 2px 2px 0;
}
td button:hover { background: var(--quds-surface-inset); color: var(--quds-action-primary-hover); }
td button:active { background: var(--quds-info-surface); }
/* Destructive row actions stay recognisably destructive. */
td button.danger {
  background: var(--quds-danger-surface);
  color: var(--quds-danger);
  border-color: var(--quds-danger-border);
}
td button.danger:hover, td button.danger:active {
  background: var(--quds-danger);
  border-color: var(--quds-danger);
  color: var(--quds-text-invert);
}
td button:disabled {
  background: var(--quds-disabled-bg);
  border-color: var(--quds-disabled-bg);
  color: var(--quds-disabled-text);
}

/* --- Forms ------------------------------------------------------------------- */

label { font-size: var(--quds-text-small); font-weight: 600; color: var(--quds-text-secondary); }

input, select, textarea {
  font: inherit;
  font-size: var(--quds-text-body);
  color: var(--quds-text);
  background: var(--quds-surface);
  border: 1px solid var(--quds-border-strong);
  border-radius: var(--quds-radius-sm);
  min-height: var(--quds-control-height);
  padding: var(--quds-space-2) var(--quds-space-3);
  box-sizing: border-box;
}
input, select { max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--quds-text-muted); opacity: 1; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--quds-disabled-bg);
  color: var(--quds-disabled-text);
}
textarea { width: 100%; min-height: 90px; line-height: var(--quds-leading-body); }
input[type="checkbox"], input[type="radio"] {
  min-height: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--quds-action-primary);
  vertical-align: middle;
}
input[type="file"] { background: transparent; border: none; padding-inline-start: 0; }

/* --- Focus visibility (keyboard) ----------------------------------------------- */

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--quds-focus-ring-width) solid var(--quds-focus-ring);
  outline-offset: var(--quds-focus-ring-offset);
  border-radius: var(--quds-radius-xs);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  border-radius: var(--quds-radius-sm);
}

/* --- Form layout helpers ---------------------------------------------------------- */

.formgrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--quds-space-2);
  align-items: center;
  margin: var(--quds-space-2) 0;
}
.formgrid input, .formgrid select { min-width: 140px; }
.formgrid label { display: inline-flex; flex-direction: column; gap: 2px; }

/* --- Tables --------------------------------------------------------------------------- */

.scroll { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--quds-surface);
  font-size: var(--quds-text-small);
  line-height: var(--quds-leading-body);
}
th, td {
  border: 0;
  border-block-end: 1px solid var(--quds-border);
  padding: var(--quds-table-pad-y) var(--quds-table-pad-x);
  text-align: start;
  vertical-align: top;
}
th {
  background: var(--quds-surface-inset);
  color: var(--quds-text-secondary);
  font-size: var(--quds-text-meta);
  font-weight: 700;
  text-transform: none;
  white-space: nowrap;
}
.scroll thead th { position: sticky; top: 0; z-index: var(--quds-z-sticky); }
tbody tr:hover > td { background: color-mix(in srgb, var(--quds-surface-inset) 45%, var(--quds-surface)); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  tbody tr:hover > td { background: var(--quds-surface-inset); }
}
td.small, th.small { font-size: var(--quds-text-meta); }

/* --- Badges / pills --------------------------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--quds-radius-pill);
  background: var(--quds-surface-inset);
  color: var(--quds-text-secondary);
  border: 1px solid var(--quds-border);
  font-size: var(--quds-text-meta);
  font-weight: 600;
  margin: 1px;
  overflow-wrap: anywhere;
}
.pill.good, .pill.told { background: var(--quds-success-surface); color: var(--quds-success); border-color: var(--quds-success-border); }
.pill.warn { background: var(--quds-danger-surface); color: var(--quds-danger); border-color: var(--quds-danger-border); }
.pill.bad  { background: var(--quds-danger); color: var(--quds-text-invert); border-color: var(--quds-danger); }
.pill.info { background: var(--quds-info-surface); color: var(--quds-info); border-color: var(--quds-info-border); }
.pill.amber, .pill.assume { background: var(--quds-warning-surface); color: var(--quds-warning); border-color: var(--quds-warning-border); }

/* Invitation / membership status pills (class = server status verbatim). */
.pill.PENDING   { background: var(--quds-info-surface); color: var(--quds-info); border-color: var(--quds-info-border); }
.pill.ACCEPTED, .pill.ACTIVE { background: var(--quds-success-surface); color: var(--quds-success); border-color: var(--quds-success-border); }
.pill.REVOKED, .pill.REMOVED { background: var(--quds-danger-surface); color: var(--quds-danger); border-color: var(--quds-danger-border); }
.pill.EXPIRED, .pill.SUPERSEDED, .pill.DISABLED { background: var(--quds-surface-inset); color: var(--quds-text-muted); border-color: var(--quds-border); }
.pill.DRAFT     { background: var(--quds-warning-surface); color: var(--quds-warning); border-color: var(--quds-warning-border); }
.pill.SUSPENDED { background: var(--quds-danger-surface); color: var(--quds-danger); border-color: var(--quds-danger-border); }

.tenant-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--quds-radius-pill);
  background: var(--quds-info-surface);
  color: var(--quds-info);
  border: 1px solid var(--quds-info-border);
  font-weight: 700;
  font-size: var(--quds-text-small);
  overflow-wrap: anywhere;
}

.swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--quds-border-strong);
  vertical-align: middle;
  margin-inline-end: 4px;
}

/* --- Tabs ------------------------------------------------------------------------------------ */

.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--quds-space-1);
  margin: var(--quds-space-3) 0;
  border-block-end: 1px solid var(--quds-border);
  padding-block-end: 0;
}
.tabbar button {
  min-height: 36px;
  background: transparent;
  color: var(--quds-text-secondary);
  border: 1px solid transparent;
  border-block-end: 3px solid transparent;
  border-radius: var(--quds-radius-xs) var(--quds-radius-xs) 0 0;
  font-weight: 600;
  padding: var(--quds-space-1) var(--quds-space-3);
}
.tabbar button:hover { background: var(--quds-surface-inset); color: var(--quds-text); }
.tabbar button.active {
  background: transparent;
  color: var(--quds-action-primary);
  border-block-end-color: var(--quds-accent-highlight);
}

/* --- Alerts / notices --------------------------------------------------------------------------- */

.banner {
  background: var(--quds-warning-surface);
  border: 1px solid var(--quds-warning-border);
  border-inline-start: 4px solid var(--quds-warning-border);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-3) var(--quds-space-4);
  font-size: var(--quds-text-small);
  color: var(--quds-text);
  margin: var(--quds-space-3) 0;
}
.banner.next {
  background: var(--quds-info-surface);
  border-color: var(--quds-info-border);
  border-inline-start-color: var(--quds-accent-highlight);
  font-size: var(--quds-text-body);
}
.note {
  background: var(--quds-warning-surface);
  border: 1px solid var(--quds-warning-border);
  border-inline-start: 4px solid var(--quds-warning-border);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-3) var(--quds-space-4);
  margin: var(--quds-space-3) 0;
  color: var(--quds-warning);
  font-size: var(--quds-text-small);
}
.redbox {
  background: var(--quds-danger-surface);
  border: 1px solid var(--quds-danger-border);
  border-inline-start: 4px solid var(--quds-danger);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-3) var(--quds-space-4);
  margin: var(--quds-space-3) 0;
}
.amberbox {
  background: var(--quds-warning-surface);
  border: 1px solid var(--quds-warning-border);
  border-inline-start: 4px solid var(--quds-warning-border);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-3) var(--quds-space-4);
  margin: var(--quds-space-3) 0;
}
.zero-spend {
  background: var(--quds-success-surface);
  border: 1px solid var(--quds-success-border);
  border-inline-start: 4px solid var(--quds-success);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-3) var(--quds-space-4);
  margin: var(--quds-space-3) 0;
  font-weight: 600;
  color: var(--quds-text);
}
.qbox {
  background: var(--quds-info-surface);
  border: 1px solid var(--quds-info-border);
  border-inline-start: 4px solid var(--quds-accent-highlight);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-3) var(--quds-space-4);
  margin: var(--quds-space-2) 0;
}

/* One-time invitation secret box: deliberately the loudest passive element
   on the page — accent-framed so an OWNER or MEMBER/VIEWER one-time link can
   never be visually mistaken for routine output. Shown once, never logged. */
.onetime {
  background: var(--quds-accent-surface);
  border: 2px solid var(--quds-accent-highlight);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-4);
  margin: var(--quds-space-3) 0;
  box-shadow: var(--quds-shadow-2);
}
.onetime b { color: var(--quds-accent-ink); }
.onetime code {
  display: block;
  word-break: break-all;
  background: var(--quds-surface);
  border: 1px solid var(--quds-accent-highlight);
  padding: var(--quds-space-2) var(--quds-space-3);
  border-radius: var(--quds-radius-xs);
  margin: var(--quds-space-2) 0;
  font-size: var(--quds-text-small);
}

/* --- Stat tiles -------------------------------------------------------------------------------- */

.totals { display: flex; flex-wrap: wrap; gap: var(--quds-space-3); margin: var(--quds-space-3) 0; }
.totals .stat {
  border: 1px solid var(--quds-border);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-3) var(--quds-space-4);
  min-width: 120px;
  background: var(--quds-surface-inset);
  color: var(--quds-text-secondary);
  font-size: var(--quds-text-meta);
}
.totals .stat b {
  display: block;
  font-size: 1.35rem;
  line-height: var(--quds-leading-tight);
  color: var(--quds-text);
  margin-block-end: 2px;
}

/* --- Drop zone (autopilot) ----------------------------------------------------------------------- */

.dropzone {
  border: 2px dashed var(--quds-border-strong);
  border-radius: var(--quds-radius);
  padding: var(--quds-space-6);
  text-align: center;
  color: var(--quds-text-muted);
  background: var(--quds-surface-inset);
  margin: var(--quds-space-2) 0;
  transition: border-color var(--quds-duration-fast) var(--quds-ease),
              background-color var(--quds-duration-fast) var(--quds-ease);
}
.dropzone.drag {
  border-color: var(--quds-accent-highlight);
  background: var(--quds-accent-surface);
  color: var(--quds-accent-ink);
}

/* Recommended option emphasis (autopilot creative directions). */
.option-rec { border: 2px solid var(--quds-accent-highlight); }

.thumb img, .thumb video {
  max-width: 220px;
  max-height: 160px;
  border-radius: var(--quds-radius-xs);
  border: 1px solid var(--quds-border);
}

/* --- Data-state helpers ------------------------------------------------------------------------------ */

/* Existing pages render loading / empty / error states as text with .muted /
   .danger — those classes above cover them. The helpers below are available
   for future states without inventing page markup. */
.quds-empty {
  color: var(--quds-text-muted);
  background: var(--quds-surface-inset);
  border: 1px dashed var(--quds-border-strong);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-5);
  text-align: center;
}
.quds-error {
  color: var(--quds-danger);
  background: var(--quds-danger-surface);
  border: 1px solid var(--quds-danger-border);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-3) var(--quds-space-4);
}

/* --- Small-screen adjustments -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .card { padding: var(--quds-space-4); border-radius: var(--quds-radius-sm); }
  .formgrid { flex-direction: column; align-items: stretch; }
  .formgrid input, .formgrid select, .formgrid button, .formgrid label {
    width: 100%;
    box-sizing: border-box;
    margin: 2px 0;
  }
  button, input, select { min-height: var(--quds-control-height-lg); }
  td button { min-height: 36px; }
  .totals .stat { min-width: 90px; flex: 1 1 40%; }
  .tabbar button { flex: 1 1 30%; }
  .dropzone { padding: var(--quds-space-4); }
  .thumb img, .thumb video { max-width: 100%; }
}