/* CubeWP client portal — LAYOUT ONLY.
 *
 * Badges, cards, buttons, tables, inputs, skeletons and empty states are the
 * platform's components (console.css). This file positions them and nothing
 * else. A `cl-` rule that restyles a `cw-` component is the bug this file was
 * once rewritten to remove: the old .cl-site set its own card chrome, which
 * beat .cw-card on source order and meant the portal's cards were never the
 * platform's cards at all.
 *
 * ===========================================================================
 * LAPTOP-FIRST DENSITY
 *
 * The portal is used from ordinary laptops (1366×768 is the common case), so
 * the shell is deliberately compact: a 224px sidebar, a 56px topbar, and a
 * content column capped at 1040px. At that size the header, the page title,
 * the stat row AND the first site rows all fit above the fold — the test this
 * layout was sized against.
 */

* { box-sizing: border-box; }

.cl-body {
  margin: 0; background: var(--cw-bg); color: var(--cw-ink);
  font: var(--cw-body);
  -webkit-font-smoothing: antialiased;
}

/* !important is load-bearing: this is declared before .cl-app and .cl-gate,
   which set display at the same specificity, so source order would otherwise
   show something meant to be hidden. */
.hidden { display: none !important; }

/* ══ Boot + gate ═══════════════════════════════════════════════════════════ */

.cl-boot, .cl-gate {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--cw-s6);
}
.cl-boot-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--cw-border); border-top-color: var(--cw-accent);
  animation: cl-spin .8s linear infinite;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cl-boot-spinner { animation-duration: 3s; } }

/* Left-aligned: it holds a form, and a centred error floats away from the
   field it belongs to. The brand block above the card carries the agency. */
.cl-gate-wrap { width: 100%; max-width: 26rem; }
.cl-gate-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; margin-bottom: var(--cw-s5); text-align: center;
}
.cl-gate-agency { font: var(--cw-title); color: var(--cw-ink); overflow-wrap: anywhere; }
.cl-gate-eyebrow {
  font: var(--cw-micro); color: var(--cw-text-soft);
  text-transform: uppercase; letter-spacing: .07em;
}
.cl-gate-card  { width: 100%; text-align: left; }
.cl-gate-title { font: var(--cw-heading); color: var(--cw-ink); margin: 0 0 var(--cw-s2); }
.cl-gate-text  { font: var(--cw-small); color: var(--cw-text-soft); margin: 0 0 var(--cw-s4); }
.cl-gate-card .cw-btn { margin-top: var(--cw-s2); }
.cl-gate-card .cw-btn + .cw-btn { margin-left: var(--cw-s2); }
.cl-gate-error { margin-top: var(--cw-s3); }

/* ══ Shell ═════════════════════════════════════════════════════════════════ */

.cl-app {
  display: grid;
  /* minmax(0,1fr) so a wide table scrolls inside the column rather than
     widening the page. */
  grid-template-columns: 224px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--cw-bg);
}

.cl-sidebar {
  display: flex; flex-direction: column; gap: var(--cw-s5);
  padding: var(--cw-s5) var(--cw-s3);
  background: var(--cw-surface);
  border-right: 1px solid var(--cw-border);
}

/* THE AGENCY LEADS. The eyebrow says what the product is so the agency's own
   name can be the title — "Wooster", not "CubeWP Client Portal". */
.cl-brand { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 var(--cw-s2); }
.cl-brand-eyebrow {
  font: var(--cw-micro); color: var(--cw-text-soft);
  text-transform: uppercase; letter-spacing: .06em;
}
.cl-brand-name {
  font: var(--cw-heading); color: var(--cw-ink);
  overflow-wrap: anywhere;
}

.cl-nav { display: flex; flex-direction: column; gap: 2px; }
.cl-nav-item {
  appearance: none; border: 0; background: transparent; text-align: left;
  font: var(--cw-small); font-weight: 500; color: var(--cw-text);
  padding: 7px var(--cw-s2); border-radius: var(--cw-r-sm);
  cursor: pointer; min-height: 34px;
}
.cl-nav-item:hover { background: var(--cw-bg); color: var(--cw-ink); }
.cl-nav-item.active { background: var(--cw-accent-subtle); color: var(--cw-accent); font-weight: 600; }
.cl-nav-item:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; }

.cl-sidebar-foot { margin-top: auto; padding: 0 var(--cw-s2); }
.cl-help { font: var(--cw-micro); color: var(--cw-text-soft); margin: 0; }

.cl-main { display: flex; flex-direction: column; min-width: 0; }

/* Compact on purpose: a tall header is the fastest way to lose 768px. */
.cl-topbar {
  display: flex; align-items: center; gap: var(--cw-s3);
  min-height: 56px; padding: var(--cw-s2) var(--cw-s6);
  background: var(--cw-surface); border-bottom: 1px solid var(--cw-border);
  position: sticky; top: 0; z-index: 20;
}
.cl-topbar-head  { min-width: 0; flex: 1; }
.cl-topbar-title { font: var(--cw-heading); color: var(--cw-ink); margin: 0; text-wrap: balance; }
.cl-topbar-sub   { font: var(--cw-micro); color: var(--cw-text-soft); margin: 1px 0 0; }
.cl-topbar-right { display: flex; align-items: center; gap: var(--cw-s2); }

.cl-account { display: flex; align-items: center; gap: var(--cw-s2); }
.cl-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cw-accent); color: var(--cw-accent-ink);
  font: 600 11px/1 var(--cw-font);
}
.cl-account-who {
  font: var(--cw-small); color: var(--cw-text-soft);
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-chevron { font-size: 10px; color: var(--cw-text-soft); }

.cl-view {
  flex: 1; width: 100%; max-width: 1040px; margin: 0 auto;
  padding: var(--cw-s5) var(--cw-s6) var(--cw-s7); min-width: 0;
}
.cl-view:focus { outline: none; }   /* focused only as a skip-link target */

.cl-menu-btn { display: none; }
.cl-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .38); z-index: 40; }

/* ══ Overview ══════════════════════════════════════════════════════════════ */

.cl-hello { margin-bottom: var(--cw-s5); }
.cl-hello-title { font: var(--cw-title); color: var(--cw-ink); margin: 0; text-wrap: balance; }
.cl-hello-sub { font: var(--cw-small); color: var(--cw-text-soft); margin: 3px 0 0; }

.cl-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
  gap: var(--cw-s3); margin-bottom: var(--cw-s5);
}
.cl-stat-value { font: var(--cw-title); color: var(--cw-ink); line-height: 1.1;
                 font-variant-numeric: tabular-nums; }
.cl-stat-label { font: var(--cw-micro); color: var(--cw-text-soft); margin-top: 2px; }
.cl-stat-warn .cl-stat-value { color: var(--cw-warn); }

.cl-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cw-s3); margin-bottom: var(--cw-s2); flex-wrap: wrap;
}
.cl-card-title { font: var(--cw-heading); color: var(--cw-ink); margin: 0 0 var(--cw-s2); }
.cl-card-head .cl-card-title { margin: 0; }

/* ══ Site rows ═════════════════════════════════════════════════════════════ */

.cl-rows { list-style: none; margin: 0; padding: 0; }
.cl-row {
  display: flex; align-items: center; gap: var(--cw-s3);
  padding: var(--cw-s3) 0; min-height: 52px;
  border-bottom: 1px solid var(--cw-border);
}
.cl-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cl-row:first-child { padding-top: 0; }

.cl-mark {
  width: 32px; height: 32px; border-radius: var(--cw-r-sm); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cw-accent-subtle); color: var(--cw-accent);
  font: 600 13px/1 var(--cw-font);
}
.cl-row-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cl-row-name {
  appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer;
  text-align: left; font: var(--cw-small); font-weight: 600; color: var(--cw-ink);
  overflow-wrap: anywhere;
}
.cl-row-name:hover { color: var(--cw-accent); }
.cl-row-name:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; border-radius: 2px; }
.cl-row-host { font: var(--cw-micro); color: var(--cw-text-soft); text-decoration: none;
               overflow-wrap: anywhere; }
a.cl-row-host:hover { color: var(--cw-accent); text-decoration: underline; }
.cl-row-actions { display: flex; gap: var(--cw-s2); flex: none; }

/* The status dot inside a badge — colour comes from the badge's own text
   colour so the pair can never disagree. */
.cl-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; margin-right: 5px; vertical-align: 1px;
  background: currentColor;
}

.cl-toolbar { margin-bottom: var(--cw-s3); max-width: 340px; }

/* ══ Site detail ═══════════════════════════════════════════════════════════ */

.cl-crumb { margin-bottom: var(--cw-s2); }
.cl-crumb-back {
  appearance: none; border: 0; background: transparent; padding: 2px 0; cursor: pointer;
  font: var(--cw-micro); color: var(--cw-text-soft);
}
.cl-crumb-back:hover { color: var(--cw-accent); }
.cl-crumb-back:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; border-radius: 2px; }

.cl-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--cw-s4); margin-bottom: var(--cw-s5); flex-wrap: wrap;
}
.cl-detail-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-detail-title { font: var(--cw-title); color: var(--cw-ink); margin: 0; overflow-wrap: anywhere; }

.cl-block { margin-bottom: var(--cw-s4); }
.cl-btn-row { display: flex; gap: var(--cw-s2); flex-wrap: wrap; }

.cl-kv { table-layout: fixed; }
.cl-kv th, .cl-kv td { overflow-wrap: anywhere; }
.cl-kv th { text-align: left; font: var(--cw-small); color: var(--cw-text-soft);
            font-weight: 450; width: 34%; }
.cl-kv-note { display: block; font: var(--cw-micro); color: var(--cw-text-soft); margin-top: 2px; }

/* ══ Utilities ═════════════════════════════════════════════════════════════ */

.cl-muted  { color: var(--cw-text-soft); font: var(--cw-small); margin: 0; }
.cl-spaced { margin-top: var(--cw-s3); }
/* Pulls a card subtitle up toward its title. -4px against the title's 8px
   bottom margin leaves a 4px gap; the full -8px closed it to zero and the
   pair read as one crowded line. */
.cl-tight  { margin: -4px 0 var(--cw-s4); }
.cl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ══ Fallback toast (only when console.js is absent) ════════════════════════ */

.cl-toast {
  position: fixed; left: 50%; bottom: var(--cw-s6); transform: translateX(-50%);
  background: var(--cw-ink); color: var(--cw-surface);
  padding: var(--cw-s3) var(--cw-s5); border-radius: var(--cw-r-md);
  font: var(--cw-small); max-width: min(520px, 92vw); z-index: 50;
}
.cl-toast-error { background: var(--cw-danger); }

/* ══ Drawer ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .cl-app { grid-template-columns: minmax(0, 1fr); }
  /* The SAME sidebar becomes an off-canvas drawer — one navigation moved, not a
     second mobile menu to keep in sync with the first. */
  .cl-sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 84vw); z-index: 50;
    transform: translateX(-100%); transition: transform var(--cw-t-base);
    padding: var(--cw-s6) var(--cw-s4);
  }
  .cl-sidebar.open { transform: translateX(0); }
  .cl-menu-btn { display: inline-flex; }
  .cl-topbar { padding: var(--cw-s2) var(--cw-s4); }
  .cl-view   { padding: var(--cw-s4); }
  .cl-account-who, .cl-chevron { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-sidebar { transition: none; }
}

@media (max-width: 560px) {
  .cl-view { padding: var(--cw-s3); }
  /* Rows become stacked cards: name+host on top, badge and actions below.
     Shrinking the desktop row squeezes the buttons into uselessness. */
  .cl-row { flex-wrap: wrap; }
  .cl-row .cw-badge { order: 2; }
  .cl-row-actions { order: 3; width: 100%; margin-left: 44px; }
  .cl-row-actions .cw-btn { flex: 1 1 auto; }
  .cl-detail-head .cl-btn-row { width: 100%; }
  .cl-detail-head .cw-btn { flex: 1 1 auto; }
  .cl-stats { grid-template-columns: repeat(2, 1fr); }
  .cl-toolbar { max-width: none; }
}