/* ChatFlow admin chrome (design A): top bar, account button, sidebar (I3 Playbook),
   phone bar and drawer, login screen. Needs tokens.css and components.css first.
   Geometry follows the design's chrome.md: top bar 52px with its hairline, sidebar
   220px plus a 1px edge, 36px rows (44px in the phone drawer and on touch), the
   toggle on the rows' 28px icon column and the logo on the label column (x 50).
   Colours come from tokens only, so night needs no rules here. The account menu is
   the shared .menu (components.css), opened by CFUI.menu. */

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font);
  color-scheme: var(--scheme);
}
/* aria-expanded here tells assistive tech the sidebar is open; it is not a pressed look */
.cf-sidebar-toggle[aria-expanded] { background: transparent; color: var(--ink-2); }
.cf-sidebar-toggle[aria-expanded]:hover { background: var(--fill); color: var(--ink); }
.cf-sidebar-toggle .cf-toggle-phone { display: none; }
/* the phone glyph is a bare inline <svg>: as a block it sits on the button's centre
   instead of a text baseline (which left it 1.5px high) */
.cf-sidebar-toggle .cf-toggle-phone svg { display: block; }
/* The flow editor hides the whole app layout, so there is no sidebar to toggle:
   the button leaves the bar while the editor's controls are in it. */
.topbar:has(#editor-buttons:not(.hidden)) .cf-sidebar-toggle { display: none; }
.cf-brand { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cf-brand .brand-logo { display: block; height: 20px; width: auto; }
.cf-wordmark { font: var(--fw-semibold) 16px/20px var(--font); color: var(--ink); white-space: nowrap; }

/* account button, trailing; CFUI.menu hangs the account menu under it, right-aligned */
.cf-account { position: relative; flex: none; margin-left: auto; }
.cf-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 6px 0 4px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  font: var(--fw-semibold) var(--fs-label)/16px var(--font);
  white-space: nowrap;
  cursor: pointer;
}
.cf-account-btn:hover { background-image: linear-gradient(var(--press-overlay), var(--press-overlay)); }
.cf-account-btn[aria-expanded="true"] { background: var(--fill); }
.cf-account-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cf-account-chev { flex: none; display: flex; color: var(--ink-2); }

/* ---------- Sidebar ---------- */
.sidebar {
  flex: none;
  width: 221px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--nav-ground);
  border-right: 1px solid var(--line);
  font-family: var(--font);
  color-scheme: var(--scheme);
  transition: width .2s ease, visibility 0s;
}
/* Closed: no width, and hidden from Tab and assistive tech once the slide ends */
.sidebar.collapsed { width: 0; border-right-width: 0; visibility: hidden; transition: width .2s ease, visibility 0s linear .2s; }
/* The groups scroll in short windows; Settings stays pinned below them. Both keep
   their full width so nothing reflows while the column animates closed. */
.cf-nav-groups {
  flex: 1;
  min-height: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  padding: 8px 8px 0;
  overflow-y: auto;
}
.cf-nav-group { display: flex; flex-direction: column; }
.cf-nav-head {
  margin: 0;
  padding: 16px 4px 4px;
  font: var(--fw-semibold) var(--fs-caption)/var(--lh-caption) var(--font);
  color: var(--ink-2);
}
.cf-nav-group:first-child .cf-nav-head { padding-top: 4px; }
.cf-nav-pinned { flex: none; width: 220px; padding: 8px; border-top: 1px solid var(--line); }
.sidebar-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 8px 0 4px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  font: var(--fw-semibold) var(--fs-label)/16px var(--font);
  text-align: left;
  cursor: pointer;
}
.sidebar-tab:hover:not([aria-current="page"]) { background-image: linear-gradient(var(--press-overlay), var(--press-overlay)); }
.sidebar-tab[aria-current="page"] { background: var(--reply-tint); box-shadow: inset 0 0 0 1px var(--reply); }
.sidebar-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cf-nav-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.cf-nav-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-backdrop { display: none; }
@media (pointer: coarse) {
  .sidebar-tab { height: 44px; }
  .cf-account-btn { height: 44px; }
}

/* ---------- Phones (the iOS app loads this page) ----------
   One 45px bar: the drawer button, logo + wordmark, then the account button (the
   Appearance choice and Log Out live in its menu). The sidebar is a slide-over
   drawer that starts closed and closes after a pick. */
@media (max-width: 767px) {
  .topbar { height: 45px; padding: 0 4px; gap: 0; }
  .app-layout, .viewport, .panel { top: 45px; }
  .cf-sidebar-toggle, .cf-sidebar-toggle[aria-expanded] { width: 44px; height: 44px; color: var(--ink); }
  .cf-sidebar-toggle .cf-toggle-desk { display: none; }
  .cf-sidebar-toggle .cf-toggle-phone { display: block; }
  .cf-brand { gap: 7px; margin-left: 2px; }
  .cf-wordmark { letter-spacing: -0.01em; }
  .cf-account-btn { height: 44px; padding: 0 10px 0 8px; gap: 6px; }
  /* the name stays the button's accessible name, drawn only as the avatar */
  .cf-account-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sidebar { position: absolute; top: 0; left: 0; bottom: 0; z-index: 60; box-shadow: 6px 0 24px rgba(0, 0, 0, .35); }
  .sidebar.collapsed { box-shadow: none; }
  .sidebar:not(.collapsed) + .sidebar-backdrop { display: block; position: absolute; inset: 0; z-index: 55; background: rgba(0, 0, 0, .25); }
  .sidebar-tab { height: 44px; }
}

/* ---------- Login (admin and chatters, browser and iOS app) ---------- */
.cf-login {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  color-scheme: var(--scheme);
}
.cf-login-card {
  width: 100%;
  max-width: 360px;
  padding: 32px 28px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--pop);
}
.cf-login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cf-login-brand img { display: block; height: 28px; width: auto; }
.cf-login-brand h1 { margin: 0; font: var(--fw-semibold) var(--fs-title)/28px var(--font); color: var(--ink); }
.cf-login-sub { margin: 6px 0 24px; text-align: center; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); }
.cf-login-form { display: flex; flex-direction: column; gap: 16px; }
.cf-login .input { height: 44px; padding: 0 12px; font-size: 16px; line-height: 20px; }
.cf-login .btn.btn-primary { width: 100%; height: 44px; font-size: var(--fs-body); }
.cf-login-error { display: none; margin: 0; text-align: center; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--alert); }

/* ---------- Page frame: the <main> of every converted view ----------
   chrome.md: padding 24px 32px 32px on --bg, so content starts 32px right of the
   sidebar edge and 24px under the top bar. The view scrolls inside itself, like the
   old .flow-list it replaces. 16px gutters on phones. */
.cf-page {
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 24px 32px 32px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  color-scheme: var(--scheme);
}
@media (max-width: 767px) {
  .cf-page { padding: 16px 16px 32px; }
}
/* The colour pass views (Account Pool, Ads, Creatives, Offers, Landing Pages, Stories,
   Analytics, Funnels, Funnel Lab, Settings) stand their cards on the canvas: #F0F2F5 by
   day, so white cards and their shadow show, as the pre-2.0 pages did; --bg by night. */
.cf-page.cf-canvas { background: var(--canvas); }
/* A neutral control standing on the canvas itself (page header buttons, Period, the
   segmented controls; not one inside a card, a table or a notice) is raised by day: the
   --pop ground, a --line edge and the card shadow, since --fill vanishes on the canvas.
   By night it keeps --fill. Pressed and primary states keep their own look. */
.cf-page.cf-canvas :where(.btn:not(.btn-primary, .btn-solid, .btn-tint-info, .btn-tint-bad), .seg, .ads-period, .an-period):where(:not(:is(.card, .ads-scroll, .an-scroll, .list-error, .pool-bulk, .modal-box) *)) {
  background-color: var(--canvas-ctl);
  box-shadow: var(--canvas-ctl-shadow);
}
.cf-page.cf-canvas .icon-btn:is(:hover:not(:disabled), [aria-expanded="true"]):where(:not(:is(.card, .ads-scroll, .an-scroll, .list-error, .pool-bulk, .modal-box) *)) {
  background-color: var(--canvas-ctl);
  box-shadow: var(--canvas-ctl-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar.collapsed { transition: none; }
}