/**
 * The redesign's frame, for the two portals that share the dashboard's shell
 * — /agency and /client.
 *
 * redesign.css restyles the shared shell (.dash-sidebar, .cw-header) for
 * /dashboard. The portals differ from it in one structural way: below 900px
 * their sidebar is an off-canvas DRAWER with a menu button, where /dashboard
 * hands navigation to a bottom bar. Everything here follows from that, plus
 * the console components both portals render and redesign.css only styles
 * inside its own ported screens.
 *
 * Scoped to `.cwv2-shell .cwv2-portal`: the class on each portal's
 * .dash-shell, and the redesign's switch on <body>, which portal-v2.js sets
 * only while the app is on screen — never on the sign-in screen or the
 * agency's marketing page, which share those documents.
 *
 * Each portal's own components are mapped in its own v2.css.
 */

/* ── The frame ────────────────────────────────────────────────────────────── */

.cwv2-shell .cwv2-portal .dash-content{ min-width:0; }

/* The drawer starts at 900px, the dashboard's fixed frame at 769px. In
   between, the 64px bar is fixed but the sidebar is off-canvas, so the
   content must not keep the 252px gutter the sidebar would have occupied —
   and the brand is an ordinary item in the bar, not a 252px cell above a
   sidebar that is not there. */
@media (min-width:769px) and (max-width:900px){
  .cwv2-shell .cwv2-portal .dash-main-area{ margin-left:0; }
  .cwv2-shell .cwv2-portal .cw-header .cwv2-brand{
    flex:0 0 auto;border-right:0;padding:0 8px 0 4px;
  }
  .cwv2-shell .cwv2-portal .dash-sidebar{ top:64px;width:min(280px,84vw); }
}

/* The menu button exists only in drawer mode. Each portal hides it with one
   class, and the skin's `.cwv2-skin .cw-btn{display:inline-flex}` (two) was
   putting it back on a 1440px screen, beside a sidebar that is always there. */
.cwv2-shell .cwv2-portal .cw-header .cwv2-menu{ display:none; }

/* The right-hand cluster keeps to the right edge. Neither portal needed to say
   so before, because the breadcrumb used to take the slack. */
.cwv2-shell .cwv2-portal .cw-header-actions{ margin-left:auto; }

@media (max-width:900px){
  /* The menu button leads the bar, before the brand. */
  .cwv2-shell .cwv2-portal .cw-header .cwv2-menu{
    display:inline-flex;align-items:center;justify-content:center;
    order:-1;margin-left:12px;width:36px;height:36px;min-height:36px;padding:0;
    border:0;border-radius:9px;background:none;color:var(--ink-2);
  }
  .cwv2-shell .cwv2-portal .cw-header .cwv2-menu:hover{ background-color:var(--surface-2); }
  .cwv2-shell .ag-scrim,.cwv2-shell .cl-scrim{ background:var(--scrim); }

  /* THE DRAWER IS A COLUMN. Below 780px dashboard.css turns .dash-sidebar
     into a horizontal strip — row direction, the footer pushed right — for
     the customer dashboard's old mobile header. The drawers never undid it,
     so inside them the nav and the footer were laid out SIDEWAYS and the
     footer stuck out past the drawer's edge onto the page ("Dark mode" over
     the agency's site list, measured at 390px). The drawer is the design's
     sidebar, so it is the design's column. */
  .cwv2-shell .cwv2-portal .dash-sidebar{
    flex-direction:column;align-items:stretch;
    height:auto;bottom:0;padding:18px 12px 12px;overflow-y:auto;
  }
  .cwv2-shell .cwv2-portal .dash-sidenav{ flex-direction:column; }
  .cwv2-shell .cwv2-portal .dash-sidebar-footer{
    flex-direction:column;align-items:stretch;margin-left:0;
    border-top:1px solid var(--side-line);padding-top:14px;
  }
}

/* A phone: the bar is in normal flow, and everything in it has to fit 360px
   without the page scrolling sideways (the agency's measured 423px at 390). */
@media (max-width:768px){
  .cwv2-shell .cwv2-portal .cw-header{ gap:6px;padding:0 12px 0 0;min-width:0; }
  .cwv2-shell .cwv2-portal .cw-header .cwv2-brand{
    display:flex;align-items:center;padding:0 2px;flex:0 1 auto;min-width:0;
  }
  .cwv2-shell .cwv2-portal .cw-header .cwv2-brand .logo-img{ height:26px;width:auto;max-width:104px; }
  html[data-theme="dark"] .cwv2-shell .cwv2-portal .cw-header .cwv2-brand .logo-img{
    filter:invert(.9) hue-rotate(180deg);
  }
  .cwv2-shell .cwv2-portal .cw-header .cwv2-menu{ margin-left:6px; }
  .cwv2-shell .cwv2-portal .cw-header-actions{ gap:2px;min-width:0; }
  .cwv2-shell .cwv2-portal .cw-header .cw-account-btn{ padding:0 4px;margin-left:0; }
  /* The drawer opens over the bar, from the top of the screen. */
  .cwv2-shell .cwv2-portal .dash-sidebar{ top:0;z-index:900; }
  .cwv2-shell .ag-scrim,.cwv2-shell .cl-scrim{ z-index:899; }
  .cwv2-shell .cwv2-portal .dash-content{ padding:20px 16px 48px; }
}

/* ── The bar ──────────────────────────────────────────────────────────────── */

/* The breadcrumb, on one line always. With a view action and the search in
   the bar, "Bluewater Studio / Plan & Billing" wrapped onto two lines; the
   design's crumbs never wrap — the first crumb gives way with an ellipsis. */
.cwv2-shell .cwv2-portal .cw-crumbs{
  font-size:13.5px;color:var(--ink-3);gap:6px;
  white-space:nowrap;overflow:hidden;min-width:0;flex:0 1 auto;
}
.cwv2-shell .cwv2-portal .cw-crumbs > *{ flex:0 0 auto; }
.cwv2-shell .cwv2-portal .cw-crumbs > :first-child{
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
}
.cwv2-shell .cwv2-portal .cw-crumb-current{ color:var(--ink);font-weight:600; }
.cwv2-shell .cwv2-portal .cw-crumb-sep{ color:var(--ink-4); }

/* The account button: the person beside the avatar, in the bar's own weight. */
.cwv2-shell .ag-account-who,.cwv2-shell .cl-account-who{
  font-size:13.5px;font-weight:600;color:var(--ink);max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:900px){
  .cwv2-shell .ag-account-who,.cwv2-shell .cl-account-who{ display:none; }
}

/* ── The sidebar ──────────────────────────────────────────────────────────── */

/* The unread count beside Support: the design's nav count. */
.cwv2-shell .ag-nav-badge,.cwv2-shell .cl-nav-badge{
  margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background-color:var(--accent-fill);color:var(--on-accent);
  font:650 11.5px/20px var(--cw-font);
}
.cwv2-shell .cwv2-portal .dash-sidebar-footer .nav-email{
  font-size:12.5px;color:var(--ink-3);padding:0 4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── Console components, in the design's shapes ───────────────────────────── */

/* The status badge: a tinted label with a dot. Dot AND word, so it never
   depends on colour alone. */
.cwv2-shell .cw-badge{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;
  font-size:12px;font-weight:600;line-height:22px;border:0;
  background-color:var(--mut-bg);color:var(--mut);
}
.cwv2-shell .cw-badge-ok{ background-color:var(--ok-bg);color:var(--ok); }
.cwv2-shell .cw-badge-warn{ background-color:var(--warn-bg);color:var(--warn); }
.cwv2-shell .cw-badge-danger{ background-color:var(--bad-bg);color:var(--bad); }
.cwv2-shell .cw-badge-info{ background-color:var(--info-bg);color:var(--info); }

/* Inline code: a quiet tinted run. */
.cwv2-shell .cw-code{
  font-size:12.5px;background-color:var(--surface-2);border:1px solid var(--border);
  border-radius:5px;color:var(--ink-2);padding:1px 5px;
}

/* The empty state: the design's centred block. */
.cwv2-shell .cw-empty{ text-align:center;padding:44px 24px;max-width:460px;margin:0 auto; }
.cwv2-shell .cw-empty-title{ font-size:16px;font-weight:650;color:var(--ink); }
.cwv2-shell .cw-empty-text{ font-size:14px;line-height:1.55;color:var(--ink-3);margin:6px 0 18px; }

/* Panel and dialog chrome, in the design's weights. */
.cwv2-shell .cw-panel-title{ font-size:16px;font-weight:650;color:var(--ink); }
.cwv2-shell .cw-panel-context{ font-size:13px;color:var(--ink-3); }
.cwv2-shell .cw-label{ font-size:13px;font-weight:600;color:var(--ink-2); }
.cwv2-shell .cw-help{ font-size:12.5px;line-height:1.5;color:var(--ink-3); }
.cwv2-shell .cw-field-error{ font-size:12.5px;color:var(--bad); }

/* ── Screens: what used to slide in as a side panel ───────────────────────
   CWPortalV2.screen() mounts .cwv2-screen on <body>. A page of its own: a
   top bar with the way back, the title and its line of context, the content
   in one card, and the actions in a bar pinned to the bottom. */
.cwv2-shell.cwv2-screen-lock,.cwv2-shell.cwv2-screen-lock body{ overflow:hidden; }
.cwv2-shell.cwv2-screen-lock .cw-menu{ z-index:1100; }

.cwv2-shell .cwv2-screen{
  position:fixed;inset:0;z-index:990;display:flex;flex-direction:column;
  background-color:var(--bg);color:var(--ink);
}
/* Opaque from the first frame. Only the content moves, and a paused or
   skipped animation leaves it readable, never see-through. */
.cwv2-shell .cwv2-screen.is-open .cwv2-screen-col{ animation:cwv2ScreenIn .18s ease-out; }
@keyframes cwv2ScreenIn{ from{ transform:translateY(8px); } }
@media (prefers-reduced-motion:reduce){ .cwv2-shell .cwv2-screen.is-open .cwv2-screen-col{ animation:none; } }

.cwv2-shell .cwv2-screen-top{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;height:58px;padding:0 16px 0 10px;
  background-color:var(--surface);border-bottom:1px solid var(--border);
}
.cwv2-shell .cwv2-screen-back{
  display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px 0 6px;border-radius:8px;flex:0 0 auto;
  border:0;background:none;color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
}
.cwv2-shell .cwv2-screen-back:hover{ background-color:var(--surface-2);color:var(--ink); }
.cwv2-shell .cwv2-screen-where{
  display:flex;align-items:center;gap:8px;min-width:0;padding-left:12px;border-left:1px solid var(--border);
  font-size:13.5px;white-space:nowrap;
}
.cwv2-shell .cwv2-screen-where span{ color:var(--ink-3);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; }
.cwv2-shell .cwv2-screen-where i{ font-style:normal;color:var(--ink-4); }
.cwv2-shell .cwv2-screen-where b{ font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis; }

.cwv2-shell .cwv2-screen-scroll{ flex:1 1 auto;overflow:auto;min-height:0; }
.cwv2-shell .cwv2-screen-col{ max-width:760px;margin:0 auto;padding:36px 24px 56px; }
.cwv2-shell .cwv2-screen.is-wide .cwv2-screen-col,
.cwv2-shell .cwv2-screen.is-wide .cwv2-screen-foot-in{ max-width:1000px; }
.cwv2-shell .cwv2-screen-head h1{ margin:0;font-size:24px;font-weight:650;line-height:1.25;color:var(--ink);letter-spacing:-.01em; }
.cwv2-shell .cwv2-screen-head p{ margin:6px 0 0;max-width:660px;font-size:14.5px;line-height:1.55;color:var(--ink-3); }
.cwv2-shell .cwv2-screen-card{
  margin-top:22px;padding:28px;border-radius:14px;
  background-color:var(--surface);border:1px solid var(--border);box-shadow:var(--e2);
}
/* The design's body text. Panel content mostly leaves its size to the
   page, which is 16px here — larger than every screen around it. */
.cwv2-shell .cwv2-screen-body{ font-size:14px;line-height:1.55;color:var(--ink-2); }
.cwv2-shell .cwv2-screen-body > :first-child{ margin-top:0; }
.cwv2-shell .cwv2-screen-body > :last-child{ margin-bottom:0; }

.cwv2-shell .cwv2-screen-foot{
  flex:0 0 auto;background-color:var(--surface);border-top:1px solid var(--border);
}
.cwv2-shell .cwv2-screen-foot-in{
  max-width:760px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
}
.cwv2-shell .cwv2-screen-foot-in:empty,.cwv2-shell .cwv2-screen-foot.is-idle{ display:none; }

@media (max-width:640px){
  .cwv2-shell .cwv2-screen-col{ padding:22px 16px 40px; }
  .cwv2-shell .cwv2-screen-head h1{ font-size:20px; }
  .cwv2-shell .cwv2-screen-card{ padding:18px;border-radius:12px; }
  .cwv2-shell .cwv2-screen-where span,.cwv2-shell .cwv2-screen-where i{ display:none; }
  .cwv2-shell .cwv2-screen-foot-in{ padding:12px 16px; }
  .cwv2-shell .cwv2-screen-foot-in .cw-btn{ flex:1 1 auto; }
}