/* ════════════════════════════════════════════════════════════════════════════
   Wisherly Admin — Zoho layout in Wisherly colours.
   One light sidebar (Home · Reports · Analytics, app switcher, search, the app's pages,
   Settings · Help) · top bar (title, Search records, +, bell, settings, account, all apps) ·
   list pages with view tabs, a Filter | Sort | view toolbar, a left filter panel and
   "Total Records". Loaded after app.css, so it wins.
   ════════════════════════════════════════════════════════════════════════════ */
:root, html[data-theme] {
  --z-side: #F6F2FB; --z-side-line: #E8E1F0; --z-side-hover: #EDE6F6; --z-side-ink: #3E3346; --z-side-muted: #7A6F84;
  --z-side-w: 224px; --z-side-mini: 60px; --z-fp-w: 220px; --zc-fp-w: 236px; --rp-left-w: 300px; --rp-fold-w: 210px; --z-top-h: 56px;
  --z-bg: #F5F4F8; --z-panel: #FBFAFD; --z-line: #E6E1E8; --z-line-2: #EFEBF1; --z-head: #F8F6F9;
  --z-pink: #D4225F; --z-pink-ink: #B01D50; --z-pink-soft: #FCE7EE; --z-pink-softer: #FFF5F8;
  --r: 6px; --r-card: 8px;
  --shadow: 0 1px 2px rgba(30,20,40,.05); --shadow-hover: 0 2px 8px rgba(30,20,40,.08);
  --shadow-pop: 0 8px 28px -6px rgba(30,20,40,.22), 0 0 0 1px rgba(30,20,40,.06);
  --line: var(--z-line); --line-2: var(--z-line-2); --surface-2: var(--z-head);
}
body.zs-body { background: var(--z-bg); }

/* ── layout ── */
.zs { display: grid; grid-template-columns: var(--z-side-w) minmax(0, 1fr); min-height: 100vh; }
body.zs-mini .zs { grid-template-columns: var(--z-side-mini) minmax(0, 1fr); }

/* ── sidebar ── */
.zs-side { position: sticky; top: 0; height: 100vh; background: var(--z-side); border-right: 1px solid var(--z-side-line); display: flex; flex-direction: column; min-width: 0; z-index: 55; overflow: hidden; }
.zs-side-head { height: var(--z-top-h); display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px 0 14px; flex: none; }
.zs-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--a-ink); min-width: 0; }
.zs-brand img { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.zs-brand span { font-size: 15px; font-weight: 600; white-space: nowrap; letter-spacing: -.01em; }
.zs-brand b { font-weight: 800; }
.zs-collapse svg { width: 18px; height: 18px; }
.zs-side-top, .zs-side-foot { display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; flex: none; }
.zs-side-foot { margin-top: auto; border-top: 1px solid var(--z-side-line); padding: 8px; }
.zs-side-sep { height: 1px; background: var(--z-side-line); margin: 8px 14px; flex: none; }
.zs-si, .zs-pi { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 7px; color: var(--z-side-ink); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; min-width: 0; }
.zs-si-ico { width: 20px; height: 20px; display: grid; place-items: center; color: var(--z-side-muted); flex: none; }
.zs-si-ico svg { width: 19px; height: 19px; }
.zs-si-lab, .zs-pi span:last-child { overflow: hidden; text-overflow: ellipsis; }
.zs-pi .ico { color: var(--z-side-muted); width: 20px; }
.zs-pi .ico svg { width: 18px; height: 18px; }
.zs-si:hover, .zs-pi:hover { background: var(--z-side-hover); color: var(--a-ink); }
.zs-si.active, .zs-pi.active { background: var(--z-pink-soft); color: var(--z-pink-ink); font-weight: 700; }
.zs-si.active .zs-si-ico, .zs-pi.active .ico { color: var(--z-pink); }
.zs-space { margin: 0 8px; flex: none; }
.zs-space-btn { font: inherit; width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--a-ink); cursor: pointer; text-align: left; }
.zs-space-btn:hover, .zs-space-btn[aria-expanded="true"] { background: var(--z-side-hover); }
.zs-space-ico { width: 24px; height: 24px; border-radius: 6px; background: var(--z-pink); color: #fff; display: grid; place-items: center; flex: none; }
.zs-space-ico svg { width: 15px; height: 15px; }
.zs-space-name { flex: 1 1 auto; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-space-btn > span:last-child { display: grid; color: var(--z-side-muted); }
.zs-space-btn > span:last-child svg { width: 15px; height: 15px; }
.zs-space-menu { left: 0; right: 0; top: calc(100% + 4px); padding: 4px 6px 8px; }
.zs-panel-find { margin: 8px 8px 6px; position: relative; display: flex; align-items: center; flex: none; }
.zs-panel-find > span { position: absolute; left: 10px; color: var(--z-side-muted); display: grid; pointer-events: none; }
.zs-panel-find svg { width: 15px; height: 15px; }
.zs-panel-find input { font: inherit; font-size: 13px; width: 100%; height: 32px; padding: 0 10px 0 31px; border: 1px solid var(--z-side-line); border-radius: 7px; background: #fff; color: var(--a-ink); }
.zs-panel-find input:focus { outline: none; border-color: var(--z-pink); box-shadow: 0 0 0 3px rgba(212,34,95,.12); }
.zs-panel-list { display: flex; flex-direction: column; gap: 1px; padding: 2px 8px 12px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }

/* collapsed: icons only */
body.zs-mini .zs-brand span, body.zs-mini .zs-si-lab, body.zs-mini .zs-pi span:last-child, body.zs-mini .zs-space-name,
body.zs-mini .zs-space-btn > span:last-child, body.zs-mini .zs-panel-find { display: none; }
body.zs-mini .zs-side-head { flex-direction: column; justify-content: center; height: auto; padding: 10px 0 4px; gap: 6px; }
body.zs-mini .zs-si, body.zs-mini .zs-pi, body.zs-mini .zs-space-btn { justify-content: center; padding: 9px 0; }
body.zs-mini .zs-collapse svg { transform: scaleX(-1); }
body.zs-mini .zs-side-sep { margin: 8px 10px; }

/* ── top bar ── */
.zs-main { min-width: 0; display: flex; flex-direction: column; }
.zs-top { position: sticky; top: 0; z-index: 50; height: var(--z-top-h); display: flex; align-items: center; gap: 10px; padding: 0 14px 0 18px; background: #fff; border-bottom: 1px solid var(--z-line); }
.zs-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 0 1 auto; }
.zs-title h1 { font-size: 17px; font-weight: 800; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-crumb { font-size: 13px; color: var(--a-muted); font-weight: 600; white-space: nowrap; }
.zs-crumb:not(:empty)::after { content: '›'; margin-left: 8px; color: var(--a-faint); }
.zs-search { position: relative; display: flex; align-items: center; margin-left: auto; width: min(340px, 34vw); }
.zs-search > span { position: absolute; left: 12px; color: var(--a-faint); display: grid; pointer-events: none; }
.zs-search > span svg { width: 15px; height: 15px; }
.zs-search input { font: inherit; font-size: 13px; width: 100%; height: 34px; padding: 0 34px 0 34px; border: 1px solid var(--z-line); border-radius: 999px; background: #F6F4F8; color: var(--a-ink); -webkit-appearance: none; appearance: none; }
.zs-search input::-webkit-search-cancel-button { display: none; }
.zs-search input:hover { border-color: #D9D2DC; }
.zs-search input:focus { outline: none; background: #fff; border-color: var(--z-pink); box-shadow: 0 0 0 3px rgba(212,34,95,.12); }
.zs-search kbd { position: absolute; right: 10px; pointer-events: none; }
.zs-search input:focus ~ kbd { display: none; }
.zs-gs-menu { left: 0; right: 0; top: calc(100% + 6px); padding: 4px 6px 8px; max-height: 70vh; overflow-y: auto; }
.zs-gs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--a-ink); text-decoration: none; font-size: 13px; }
.zs-gs-item .ico { color: var(--a-muted); }
.zs-gs-item small { color: var(--a-muted); font-size: 12px; }
.zs-gs-item:hover, .zs-gs-item:focus { background: var(--z-pink-softer); outline: none; }
.zs-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.zs-ibtn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--a-ink-2); cursor: pointer; text-decoration: none; }
.zs-ibtn > span { display: grid; }
.zs-ibtn svg { width: 19px; height: 19px; }
.zs-ibtn:hover, .zs-ibtn[aria-expanded="true"] { background: #F3EFF5; color: var(--a-ink); }
.zs-plus { width: 32px; height: 32px; margin: 0 6px 0 4px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--z-pink); color: #fff; cursor: pointer; }
.zs-plus > span { display: grid; }
.zs-plus svg { width: 18px; height: 18px; stroke-width: 2.2; }
.zs-plus:hover, .zs-plus[aria-expanded="true"] { background: var(--z-pink-ink); }
.zs-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--z-pink); box-shadow: 0 0 0 2px #fff; }
.zs .adm-acct { width: 38px; height: 38px; margin: 0 2px; }
.zs .adm-pic { width: 30px; height: 30px; }
.zs .me-menu { right: 0; left: auto; top: calc(100% + 8px); width: 290px; padding: 8px; }
.zs-menu-pop { right: 0; left: auto; width: 220px; padding: 4px 6px 8px; }
.zs-bell-pop { right: 0; left: auto; width: 330px; padding: 4px 6px 8px; max-height: 70vh; overflow-y: auto; }
.zs-bell-empty { padding: 18px 12px; color: var(--a-muted); font-size: 13px; text-align: center; }
.zs-note { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 6px; color: var(--a-ink); text-decoration: none; }
.zs-note:hover { background: var(--z-pink-softer); }
.zs-note > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.zs-note small { color: var(--a-muted); font-size: 12px; }
.zs-note-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: #F1EDF3; color: var(--a-ink-2); flex: none; }
.zs-note-ico.warn { background: #FDEBD3; color: #9A5B00; }
.zs-apps-pop { right: 0; left: auto; width: 420px; padding: 4px 8px 10px; }
.zs-apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.zs-apps-grid > .zs-ri { display: none; }
.zs-app { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; padding: 10px; border-radius: 8px; color: var(--a-ink); text-decoration: none; }
.zs-app:hover { background: var(--z-pink-softer); }
.zs-app-ico { grid-row: span 2; width: 34px; height: 34px; border-radius: 8px; background: var(--z-pink-soft); color: var(--z-pink-ink); display: grid; place-items: center; }
.zs-app b { font-size: 13.5px; }
.zs-app span:last-child { font-size: 12px; color: var(--a-muted); line-height: 1.35; }
.zs .popover .menu-item { border-radius: 6px; }
.zs-menu { display: none !important; }

/* ── content ── */
.zs-content { padding: 16px 18px 48px; min-width: 0; }
.zs .view { max-width: none; margin: 0; gap: 14px; display: flex; flex-direction: column; }
.zs .view > .page-head, .zs .view-body > .page-head { padding: 0; align-items: center; min-height: 36px; }
.zs .page-head h1 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.zs .page-head .page-sub { font-size: 13px; color: var(--a-muted); margin: 2px 0 0; }
body.on-launcher .zs .view > .page-head h1, body.on-launcher .zs .hello h1 { font-size: 24px; }
body.on-launcher .zs .view > .page-head .page-sub, body.on-launcher .zs .hello p { font-size: 14px; }
.zs .card, .zs .kpi, .zs .crm-tablecard { border-radius: var(--r-card); box-shadow: var(--shadow); border: 1px solid var(--z-line); background: #fff; }
.zs .btn { border-radius: 6px; height: 32px; font-size: 13px; font-weight: 600; background: #fff; border: 1px solid #D9D2DC; box-shadow: none; color: var(--a-ink); }
.zs .btn:hover:not(:disabled) { background: #F7F4F8; }
.zs .btn-primary { background: var(--z-pink); border-color: var(--z-pink); color: #fff; }
.zs .btn-primary:hover:not(:disabled) { background: var(--z-pink-ink); border-color: var(--z-pink-ink); }
.zs .btn-danger { background: #C2352B; border-color: #C2352B; color: #fff; }
.zs .btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.zs .input, .zs select.input { border-radius: 6px; height: 32px; font-size: 13px; border: 1px solid #D9D2DC; background-color: #fff; }
.zs .input:focus { border-color: var(--z-pink); box-shadow: 0 0 0 3px rgba(212,34,95,.12); outline: none; }

/* ── Zoho list: tools · filter panel · table · Total Records / paging ── */
.zt { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--z-line); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.card .zt { border: 0; box-shadow: none; border-radius: 0; }
.card > .zt:last-child { margin: 0 -16px -16px; border-top: 1px solid var(--z-line-2); }
.zt .table-scroll { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff; }
.zt .tbl th { background: var(--z-head); font-size: 12px; font-weight: 700; color: var(--a-ink-2); text-transform: none; letter-spacing: 0; padding: 10px 14px; border-bottom: 1px solid var(--z-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.zt .tbl td { padding: 10px 14px; border-bottom: 1px solid var(--z-line-2); font-size: 13px; }
.zt .tbl tr.clickable:hover td { background: var(--z-pink-softer); }
.zt .tbl tbody tr:hover td { background: #FBFAFC; }
.zt-tools { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--z-line); background: #fff; }
.zt-tool { position: relative; height: 30px; min-width: 32px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #D9D2DC; border-radius: 6px; background: #fff; color: var(--a-ink-2); cursor: pointer; font: inherit; font-size: 12.5px; }
.zt-tool:hover { background: #F7F4F8; }
.zt-tool.on { border-color: var(--z-pink); color: var(--z-pink-ink); background: var(--z-pink-softer); }
.zt-count { background: var(--z-pink); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 6px; line-height: 17px; }
.zt-chip { font-size: 12px; color: var(--a-muted); }
.zt-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-width: 0; }
.zt-body > .zt-fp[hidden] + .zt-area { grid-column: 1 / -1; }
.zt-area { min-width: 0; display: flex; flex-direction: column; }
.zt-area > .empty { padding: 32px 16px; }
.zt-fp { border-right: 1px solid var(--z-line); background: var(--z-panel); padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; max-height: 76vh; overflow-y: auto; }
.zt-fp-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.zt-fp-head b { font-size: 13px; }
.zt-fp .input { height: 30px; width: 100%; }
.zt-fp-list { display: flex; flex-direction: column; }
.zt-fp-item { border-radius: 6px; }
.zt-fp-item.on { background: #fff; box-shadow: 0 0 0 1px var(--z-line); margin: 3px 0; }
.zt-fp-lab { display: flex; align-items: center; gap: 8px; padding: 6px 6px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.zt-fp-lab:hover { background: #F1EDF3; }
.zt-fp-lab input, .zt-fp-val input { accent-color: var(--z-pink); width: 15px; height: 15px; margin: 0; }
.zt-fp-ctl { padding: 0 8px 8px 29px; }
.zt-fp-vals { display: flex; flex-direction: column; padding: 0 6px 8px 27px; max-height: 220px; overflow-y: auto; }
.zt-fp-val { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; cursor: pointer; color: var(--a-ink-2); }
.zt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--z-line); background: #fff; font-size: 12.5px; color: var(--a-muted); }
.zt-total b { color: var(--a-ink); font-weight: 700; margin-left: 2px; }
.zt-pager { display: flex; align-items: center; gap: 8px; }
.zt-per { height: 28px !important; font-size: 12px !important; padding: 0 6px; width: auto; }
.zt-range { font-variant-numeric: tabular-nums; color: var(--a-ink-2); min-width: 70px; text-align: right; }
.zt-pg { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #D9D2DC; border-radius: 6px; background: #fff; color: var(--a-ink-2); cursor: pointer; padding: 0; }
.zt-pg svg { width: 14px; height: 14px; }
.zt-pg:disabled { opacity: .4; cursor: default; }
.zt-pg:not(:disabled):hover { background: #F7F4F8; }
.zs .pager { display: none; }

/* ── mobile ── */
@media (max-width: 900px) {
  .zs, body.zs-mini .zs { grid-template-columns: minmax(0, 1fr); }
  .zs-menu { display: grid !important; }
  .zs-side { position: fixed; top: 0; bottom: 0; left: 0; height: auto; width: min(var(--z-side-w), 84vw); transform: translateX(-110%); visibility: hidden; transition: transform .2s ease, visibility .2s; z-index: 60; box-shadow: 0 20px 60px -10px rgba(30,20,40,.35); }
  body.sb-open .zs-side { transform: none; visibility: visible; }
  body.zs-mini .zs-brand span, body.zs-mini .zs-si-lab, body.zs-mini .zs-pi span:last-child, body.zs-mini .zs-space-name { display: initial; }
  .zs-collapse { display: none; }
  .zs-scrim { position: fixed; inset: 0; background: rgba(30,20,24,.4); z-index: 54; display: none; }
  body.sb-open .zs-scrim { display: block; }
  .zs-top { padding: 0 8px; gap: 6px; }
  .zs-search { width: auto; flex: 1 1 auto; min-width: 0; }
  .zs-search kbd, .zs-crumb { display: none; }
  .zs-title { display: none; }
  #gear, #appsBtn { display: none; }
  .zs-content { padding: 12px 12px 48px; }
  .zt-body { grid-template-columns: minmax(0, 1fr); }
  .zt-fp { border-right: 0; border-bottom: 1px solid var(--z-line); max-height: 50vh; }
  .zs-apps-pop, .zs-bell-pop { position: fixed; left: 12px; right: 12px; width: auto; top: 60px; }
}
@media (min-width: 901px) { .zs-scrim { display: none; } }
@media (prefers-reduced-motion: reduce) { .zs-side { transition: none; } }

/* ── Reports ── */
.rp-home { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--z-line); border-radius: var(--r-card); min-height: 60vh; overflow: hidden; }
.rp-folders { background: var(--z-panel); border-right: 1px solid var(--z-line); padding: 10px 8px 16px; display: flex; flex-direction: column; gap: 1px; }
.rp-fhead { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--a-faint); padding: 12px 10px 6px; }
.rp-fitem { font: inherit; display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--a-ink-2); font-size: 13.5px; cursor: pointer; }
.rp-fitem span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-fitem small { color: var(--a-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.rp-fitem .ico { color: var(--a-muted); }
.rp-fitem:hover { background: #F1EDF3; }
.rp-fitem.active { background: var(--z-pink-soft); color: var(--z-pink-ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--z-pink); }
.rp-fitem.active .ico, .rp-fitem.active small { color: var(--z-pink-ink); }
.rp-fempty { font-size: 12px; padding: 0 10px; margin: 0; }
.rp-main { min-width: 0; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.rp-mhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rp-mhead h2 { font-size: 16px; font-weight: 800; }
.rp-mhead .search { width: 260px; max-width: 100%; }
.rp-main > .zt { box-shadow: none; }
.rp-name { display: flex; flex-direction: column; white-space: normal; min-width: 220px; }
.rp-name a { font-weight: 700; color: var(--z-pink-ink); text-decoration: none; }
.rp-name a:hover { text-decoration: underline; }
.rp-name small { font-size: 12px; }
.rp-star { width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: transparent; color: #C9BEC5; cursor: pointer; border-radius: 6px; padding: 0; }
.rp-star:hover { color: #E8A33D; background: #FDF6EA; }
.rp-star.on { color: #E8A33D; }
.rp-empty { padding: 26px; text-align: center; border: 1px dashed var(--z-line); border-radius: 8px; }
.rp-empty p { margin: 4px 0 0; }
.rp-sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.rp-sec-head b { font-size: 14px; }
.rp-sec-head .muted { font-size: 12.5px; }
.rp-starts { margin-top: 6px; }
.rp-start-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.rp-start { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; row-gap: 2px; padding: 12px; border: 1px solid var(--z-line); border-radius: 8px; color: var(--a-ink); text-decoration: none; background: #fff; }
.rp-start:hover { border-color: var(--z-pink); background: var(--z-pink-softer); }
.rp-start-ico { grid-row: span 3; width: 32px; height: 32px; border-radius: 8px; background: var(--z-pink-soft); color: var(--z-pink-ink); display: grid; place-items: center; }
.rp-start b { font-size: 13.5px; }
.rp-start span { font-size: 12.5px; color: var(--a-muted); line-height: 1.35; }
.rp-start small { font-size: 11px; font-weight: 700; color: var(--a-faint); text-transform: uppercase; letter-spacing: .05em; }
.rp-mods { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.rp-mod { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--z-line); border-radius: 8px; cursor: pointer; }
.rp-mod:hover { background: #FBFAFC; }
.rp-mod:has(input:checked) { border-color: var(--z-pink); background: var(--z-pink-softer); }
.rp-mod input { accent-color: var(--z-pink); margin: 0; }
.rp-mod > span:last-child { display: flex; flex-direction: column; }
.rp-mod small { color: var(--a-muted); font-size: 12px; }
.rp-mod-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--z-pink-soft); color: var(--z-pink-ink); display: grid; place-items: center; flex: none; }

/* editor + viewer header */
.rp-ed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--z-line); border-radius: var(--r-card); padding: 10px 14px; }
.rp-ed-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-ed-title h1 { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.rp-ed-title .page-sub { margin: 1px 0 0; font-size: 12.5px; color: var(--a-muted); }
.rp-back { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: var(--a-ink-2); border: 1px solid var(--z-line); flex: none; }
.rp-back:hover { background: #F7F4F8; }
.rp-ed-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-ed-acts .input { width: auto; }
.rp-stale { font-size: 12px; color: #9A5B00; background: #FDEBD3; border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.rp-split { display: inline-flex; }
.rp-split-a { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rp-split-b { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; padding: 0 8px !important; border-left: 1px solid rgba(255,255,255,.35) !important; }
.rp-savemenu, .rp-editmenu { right: 0; left: auto; top: calc(100% + 6px); min-width: 200px; padding: 6px; }
.zs .menu-item.danger { color: #C2352B; }
.zs .btn.on { border-color: var(--z-pink); color: var(--z-pink-ink); background: var(--z-pink-softer); }

.rp-editor { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; }
.rp-left { position: sticky; top: calc(var(--z-top-h) + 12px); background: #fff; border: 1px solid var(--z-line); border-radius: var(--r-card); display: flex; flex-direction: column; max-height: calc(100vh - var(--z-top-h) - 30px); overflow: hidden; }
.rp-tabs { display: flex; border-bottom: 1px solid var(--z-line); flex: none; }
.rp-tab { font: inherit; flex: 1 1 0; padding: 12px 10px 10px; border: 0; background: transparent; font-size: 13.5px; font-weight: 600; color: var(--a-muted); cursor: pointer; border-bottom: 2.5px solid transparent; display: inline-flex; gap: 6px; justify-content: center; align-items: center; }
.rp-tab small { background: #F1EDF3; color: var(--a-ink-2); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; line-height: 18px; }
.rp-tab.active { color: var(--z-pink-ink); border-bottom-color: var(--z-pink); }
.rp-tab.active small { background: var(--z-pink-soft); color: var(--z-pink-ink); }
.rp-pane { overflow-y: auto; padding: 12px; }
.rp-cpane { display: flex; flex-direction: column; gap: 10px; }
.rp-cpane .field { margin: 0; }
.rp-cpane .input { width: 100%; }
.rp-sortrow { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.rp-colhead { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 13px; }
.rp-colhead span { font-size: 12.5px; }
.rp-cols { display: flex; flex-direction: column; }
.rp-col { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.rp-col:hover { background: #F6F3F7; }
.rp-col input { accent-color: var(--z-pink); width: 15px; height: 15px; margin: 0; }
.rp-col span { flex: 1 1 auto; }
.rp-col small { font-size: 10.5px; color: var(--a-faint); text-transform: uppercase; letter-spacing: .04em; }
.rp-preview { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rp-prev-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 2px 0; font-size: 13px; }
.rp-prev-head b { font-size: 14px; }

/* filters (editor tab and the Add Filter dialog) */
.rp-filters { display: flex; flex-direction: column; gap: 10px; }
.rp-flist { display: flex; flex-direction: column; gap: 8px; }
.rp-fnone { margin: 0; font-size: 13px; }
.rp-frow { display: grid; grid-template-columns: 24px minmax(0, 1fr) 28px; grid-template-areas: 'n f d' '. o .' '. v .'; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--z-line); border-radius: 8px; background: #FBFAFC; }
.rp-fnum { grid-area: n; width: 22px; height: 22px; border-radius: 50%; background: var(--z-pink-soft); color: var(--z-pink-ink); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.rp-frow .rp-f-field { grid-area: f; width: 100%; }
.rp-frow .rp-f-op { grid-area: o; width: 100%; }
.rp-frow > .rp-f-val, .rp-frow > .rp-f-two, .rp-frow > .rp-f-none { grid-area: v; }
.rp-frow > .rp-f-none { display: none; }
.rp-frow > .zt-pg { grid-area: d; }
.rp-f-val { width: 100%; }
.rp-f-two { display: flex; align-items: center; gap: 6px; }
.rp-f-two .input { flex: 1 1 0; min-width: 0; }
.rp-add { align-self: flex-start; }
.rp-crit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px dashed var(--z-line); }
.rp-crit-l { font-size: 12.5px; font-weight: 700; color: var(--a-ink-2); }
.rp-pattern { flex: 1 1 140px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 12.5px !important; }
.rp-pattern[readonly] { background: #F6F4F8 !important; color: var(--a-ink-2); }
.rp-crit-help { font-size: 12px; margin: 0; }
.rp-addfilter { display: flex; flex-direction: column; gap: 10px; min-width: min(640px, 80vw); }
.rp-af-sec p { margin: 2px 0 0; font-size: 12.5px; }
.rp-addfilter .rp-frow { grid-template-columns: 24px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) 28px; grid-template-areas: 'n f o v d'; }
.rp-addfilter .rp-frow > .rp-f-none { display: block; }

/* viewer */
.rp-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--a-ink-2); padding: 0 2px; }
.rp-total b { color: var(--a-ink); }
.rp-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rp-summary { padding: 14px 16px 16px; }
.rp-summary .rp-sec-head { margin-bottom: 10px; }
.rp-barcell { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 120px; }
.rp-barcell i { display: block; height: 6px; border-radius: 3px; background: var(--z-pink); opacity: .75; max-width: 80px; }
.rp-records { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rp-note { margin: 0; font-size: 12.5px; color: var(--a-muted); }

@media (max-width: 900px) {
  .rp-home, .rp-editor { grid-template-columns: minmax(0, 1fr); }
  .rp-folders { border-right: 0; border-bottom: 1px solid var(--z-line); flex-direction: row; flex-wrap: wrap; }
  .rp-folders .rp-fhead { width: 100%; padding: 6px 6px 2px; }
  .rp-fitem { width: auto; }
  .rp-left { position: static; max-height: none; }
  .rp-addfilter { min-width: 0; }
  .rp-addfilter .rp-frow { grid-template-columns: 24px minmax(0, 1fr) 28px; grid-template-areas: 'n f d' '. o .' '. v .'; }
}
.overlay, .drawer-wrap { z-index: 200 !important; }
.toasts { z-index: 260 !important; }

/* ── Zoho page frame: title lives in the top bar ── */
body:not(.on-launcher) .zs .view > .page-head .page-titles { display: none; }
body:not(.on-launcher) .zs .view > .page-head:not(:has(.page-actions)) { display: none; }
body:not(.on-launcher) .zs .view > .page-head { justify-content: flex-end; min-height: 0; }

/* ── CRM lists, Zoho-style: tabs · Filter | Sort | display · actions · filter panel + records ── */
.zc .crm-views { background: #fff; border: 1px solid var(--z-line); border-radius: var(--r-card); padding: 0 10px; }
.zc .crm-views-row { border: 0; }
.zc-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zc-tool { font: inherit; height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--a-ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.zc-tool:hover { background: #EFEBF3; }
.zc-tool.on { background: #fff; border-color: var(--z-line); color: var(--z-pink-ink); }
.zc-n:empty { display: none; }
.zc-n { background: var(--z-pink); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 6px; line-height: 17px; }
.zc-sep { width: 1px; height: 20px; background: var(--z-line); margin: 0 4px; }
.zc-sp { flex: 1 1 auto; }
.zc .crm-modes { background: transparent; padding: 0; gap: 2px; box-shadow: none; border: 0; }
.zc .crm-modes button { width: 34px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 6px; color: var(--a-muted); background: transparent; }
.zc .crm-modes button.on { color: var(--z-pink-ink); background: var(--z-pink-soft); }
.zc .crm-search { width: 240px; max-width: 100%; flex: 0 1 240px; }
.zc-sortdir { display: flex; gap: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--z-line-2); margin-top: 6px; }
.zc-sortdir .btn.on { border-color: var(--z-pink); color: var(--z-pink-ink); }
.zc-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; align-items: start; }
.zc-split > .zc-fp[hidden] + .crm-body { grid-column: 1 / -1; }
.zc-split > .crm-body { min-width: 0; }
.zc-fp { position: sticky; top: calc(var(--z-top-h) + 12px); background: #fff; border: 1px solid var(--z-line); border-radius: var(--r-card); display: flex; flex-direction: column; max-height: calc(100vh - var(--z-top-h) - 28px); overflow: hidden; }
.zc-fp-head { padding: 12px 14px 8px; font-size: 14px; flex: none; }
.zc-fp-body { overflow-y: auto; padding: 0 6px 8px; flex: 1 1 auto; }
.zc-fp-body .crm-fgroup { border: 0; border-bottom: 1px solid var(--z-line-2); border-radius: 0; margin: 0; background: transparent; box-shadow: none; }
.zc-fp-body .crm-fgroup > summary { padding: 10px 8px; font-size: 13.5px; font-weight: 700; }
.zc-fp-body .crm-fgroup-b { padding: 0 8px 12px; }
.zc-fp-body .crm-fsub-t { font-size: 12.5px; }
.zc-fp-foot { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--z-line); background: #fff; flex: none; }
.zc .crm-tablecard { border-radius: var(--r-card); }
@media (max-width: 900px) {
  .zc-split { grid-template-columns: minmax(0, 1fr); }
  .zc-fp { position: static; max-height: 60vh; }
  .zc .crm-search { flex: 1 1 100%; width: auto; }
}

/* generic lists match the CRM: Filter row, then the filter panel and the records as two cards */
.zs .toolbar { gap: 8px; }
.zs .toolbar > .page-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zt.zt-has-fp { background: transparent; border: 0; box-shadow: none; overflow: visible; border-radius: 0; gap: 10px; }
.zt-has-fp > .zt-tools { background: transparent; border: 0; padding: 0; }
.zt-has-fp > .zt-body { gap: 12px; align-items: start; grid-template-columns: 260px minmax(0, 1fr); }
.zt-has-fp .zt-fp { background: #fff; border: 1px solid var(--z-line); border-radius: var(--r-card); position: sticky; top: calc(var(--z-top-h) + 12px); }
.zt-has-fp .zt-area { background: #fff; border: 1px solid var(--z-line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
@media (max-width: 900px) { .zt-has-fp > .zt-body { grid-template-columns: minmax(0, 1fr); } .zt-has-fp .zt-fp { position: static; } }
.zc .crm-modes { display: inline-flex !important; width: auto !important; flex: none !important; }

/* ── compact, Zoho-sized sidebar ── */
.zs-side-head { padding: 0 6px 0 12px; height: 52px; }
.zs-brand .zs-word { height: 24px; width: auto; display: block; }
.zs-brand .zs-markimg { display: none; width: 28px; height: 28px; border-radius: 7px; }
body.zs-mini .zs-brand .zs-word { display: none; }
body.zs-mini .zs-brand .zs-markimg { display: block; }
.zs-si, .zs-pi { padding: 6px 10px; gap: 10px; font-size: 13.5px; border-radius: 6px; }
.zs-si-ico, .zs-pi .ico { width: 18px; height: 18px; }
.zs-si-ico svg, .zs-pi .ico svg { width: 17px; height: 17px; }
.zs-side-top, .zs-side-foot { padding: 4px 8px; }
.zs-side-sep { margin: 6px 12px; }
.zs-space-btn { padding: 6px 8px; gap: 8px; }
.zs-space-ico { width: 22px; height: 22px; }
.zs-space-name { font-size: 13.5px; }
.zs-panel-find { margin: 6px 8px 4px; }
.zs-panel-find input { height: 30px; font-size: 12.5px; }
.zs-panel-list { padding: 2px 8px 10px; }

/* ── resize grips ── */
.zs-rsz { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
.zs-rsz::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: transparent; transition: background .12s; }
.zs-rsz:hover::after, .zs-rsz:focus-visible::after, body.zs-resizing .zs-rsz::after { background: var(--z-pink); width: 2px; }
.zs-rsz:focus-visible { outline: none; }
body.zs-resizing { cursor: col-resize; user-select: none; }
body.zs-resizing * { transition: none !important; }
.zs-side, .zt-fp, .zc-fp, .rp-left, .rp-folders { position: relative; }
.zs-side { position: sticky; }
.zt-fp.zt-fp, .zc-fp { position: sticky; }
.rp-left { position: sticky; }
body.zs-mini .zs-side .zs-rsz { display: none; }
@media (max-width: 900px) { .zs-rsz { display: none; } }

/* panel widths follow the grips */
.zt-has-fp > .zt-body { grid-template-columns: var(--z-fp-w) minmax(0, 1fr); }
.zc-split { grid-template-columns: var(--zc-fp-w) minmax(0, 1fr); }
.rp-editor { grid-template-columns: var(--rp-left-w) minmax(0, 1fr); }
.rp-home { grid-template-columns: var(--rp-fold-w) minmax(0, 1fr); }

/* compact filter panels, Zoho-sized */
.zt-fp { padding: 10px 8px; gap: 6px; }
.zt-fp-lab { padding: 4px 6px; font-size: 12.5px; }
.zt-fp-head b { font-size: 12.5px; }
.zc-fp-head { padding: 10px 12px 6px; font-size: 13px; }
.zc-fp-body { padding: 0 4px 6px; }
.zc-fp-body .crm-fgroup > summary { padding: 8px 8px; font-size: 12.5px; text-transform: none; }
.zc-fp-body .crm-fgroup-b { padding: 0 6px 8px; display: flex; flex-direction: column; gap: 0; }
.zc-field { border-radius: 6px; }
.zc-field.on { background: var(--z-pink-softer); margin: 2px 0; padding-bottom: 6px; }
.zc-flab { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 12.5px; color: var(--a-ink-2); cursor: pointer; border-radius: 6px; }
.zc-flab:hover { background: #F4F0F6; }
.zc-field.on .zc-flab { color: var(--a-ink); font-weight: 600; }
.zc-flab input, .zc-fctl input[type=checkbox] { accent-color: var(--z-pink); width: 14px; height: 14px; margin: 0; }
.zc-fctl { padding: 2px 6px 0 28px; }
.zc-fctl .input { height: 28px; font-size: 12.5px; width: 100%; }
.zc-fctl .crm-check { font-size: 12px; padding: 2px 0; }
.zc-fctl .crm-check-list { max-height: 200px; overflow-y: auto; }
.zc-fctl .crm-range { display: flex; gap: 4px; align-items: center; }
.zc-fctl .crm-range .input { min-width: 0; }
.zc-fp-foot { padding: 8px 10px; }

/* CRM lists fill the screen: the records card runs to the bottom and scrolls inside */
@media (min-width: 901px) {
  .zs-content:has(> .view.zc) { padding-bottom: 14px; }
  .view.zc { height: calc(100vh - var(--z-top-h) - 30px); min-height: 520px; }
  .view.zc > * { flex: none; }
  .view.zc > .zc-split { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .zc .zc-fp { position: relative; top: 0; max-height: none; height: 100%; }
  .zc .crm-body { min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: auto; }
  .zc .crm-tablecard { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .zc .crm-scroll { flex: 1 1 auto; min-height: 0; max-height: none !important; }
  .zc .crm-tablecard > .crm-pager { flex: none; }
}

/* Reports: related modules */
.rp-step { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; }
.rp-step .muted { font-size: 12.5px; }
.rp-rels { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--z-line); display: flex; flex-direction: column; gap: 8px; }
.rp-rels b { font-size: 13.5px; }
.rp-rel-list { display: flex; flex-direction: column; gap: 6px; }
.rp-rel { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--z-line); border-radius: 8px; cursor: pointer; font-size: 13px; }
.rp-rel:has(input:checked) { border-color: var(--z-pink); background: var(--z-pink-softer); }
.rp-rel input { accent-color: var(--z-pink); margin: 0; }
.rp-rel span { flex: 1 1 auto; font-weight: 600; }
.rp-rel small { font-size: 11.5px; }
.rp-modbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--z-line); }
.rp-modchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 999px; background: #F1EDF5; color: var(--a-ink-2); font-size: 12px; font-weight: 700; }
.rp-modchip.primary { background: var(--z-pink-soft); color: var(--z-pink-ink); }
.rp-modchip .ico, .rp-modchip .ico svg { width: 13px; height: 13px; }
.rp-modchip button { border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 0 0 2px; }
.rp-addrel { height: 26px !important; font-size: 12px !important; width: auto !important; padding: 0 24px 0 8px; }
.rp-colgroup { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--a-faint); padding: 10px 6px 4px; }

/* ── Setup (Zoho-style settings index) ── */
.st-top { display: flex; align-items: center; gap: 20px; margin: 6px auto 4px; width: 100%; max-width: 1440px; }
.st-top h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.st-search { position: relative; display: flex; align-items: center; width: 340px; max-width: 100%; }
.st-search .ico { position: absolute; left: 11px; color: var(--a-faint); }
.st-search .input { width: 100%; padding-left: 34px; height: 36px !important; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; width: 100%; max-width: 1440px; margin: 0 auto; }
.st-card { background: #fff; border: 1px solid var(--z-line); border-radius: 12px; padding: 22px 22px 20px; min-height: 200px; }
.st-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.st-head .ico, .st-head .ico svg { width: 19px; height: 19px; color: var(--a-ink-2); }
.st-head b { font-size: 15px; font-weight: 800; }
.st-links { display: flex; flex-direction: column; padding-left: 29px; }
.st-link { padding: 6px 0; font-size: 14px; color: var(--a-ink-2); text-decoration: none; }
.st-link:hover { color: var(--z-pink-ink); text-decoration: underline; }

/* ── CRM record: Zoho-style inline edit, journey, note stage ── */
.zr-editable { cursor: text; border-radius: 6px; position: relative; }
.zr-editable:hover { background: var(--z-pink-softer); }
.zr-editable dd { position: relative; padding-right: 22px; }
.zr-pencil { position: absolute; right: 2px; top: 0; color: var(--a-faint); font-size: 13px; opacity: 0; transition: opacity .12s; }
.zr-editable:hover .zr-pencil { opacity: 1; color: var(--z-pink-ink); }
.zr-editable.editing { background: #fff; box-shadow: 0 0 0 1px var(--z-pink); cursor: default; }
.zr-editable.editing .zr-pencil { display: none; }
.zr-inline { display: flex; align-items: flex-start; gap: 4px; }
.zr-inline .input { flex: 1 1 auto; min-width: 0; height: 30px; font-size: 13px; }
.zr-inline textarea.input { height: auto; min-height: 70px; padding: 6px 8px; }
.zr-ok, .zr-no { width: 28px; height: 28px; flex: none; border-radius: 6px; border: 1px solid var(--z-line); background: #fff; cursor: pointer; font-size: 13px; line-height: 1; }
.zr-ok { background: var(--z-pink); border-color: var(--z-pink); color: #fff; }
.zr-ok:disabled { opacity: .6; }
.zr-journey h3 { margin-bottom: 10px; }
.zr-jlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.zr-jlist li { display: flex; flex-direction: column; padding: 8px 26px 8px 14px; background: #F4F0F6; position: relative; margin-right: 8px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 10px 50%); }
.zr-jlist li:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 6px 0 0 6px; }
.zr-jlist li b { font-size: 13px; }
.zr-jlist li small { font-size: 11px; color: var(--a-muted); }
.zr-jlist li.on { background: var(--z-pink); color: #fff; }
.zr-jlist li.on small { color: rgba(255,255,255,.85); }
.zr-notestage { display: inline-block; background: #F1EDF5; color: var(--a-ink-2); border-radius: 999px; padding: 0 7px; margin-right: 6px; font-size: 11px; font-weight: 700; }
.zn-text { white-space: pre-wrap; display: block; max-width: 520px; }

/* ── condition builder (Zoho-style) ── */
.zc-cond { display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.zc-cond .input, .zc-cond select.input { height: 28px !important; font-size: 12.5px !important; width: 100%; min-width: 0; }
.zc-cond .zc-op { width: auto !important; max-width: 100%; align-self: flex-start; padding-right: 24px; }
.zc-row { display: flex; gap: 5px; align-items: center; }
.zc-row .zc-val { flex: 1 1 60px; }
.zc-row .zc-unit { flex: 1 1 80px; }
.zc-and { font-size: 11.5px; color: var(--a-muted); }
.zc-sec { border-bottom: 1px solid var(--z-line-2); }
.zc-sec > summary { list-style: none; cursor: pointer; padding: 9px 8px 7px; font-size: 13px; font-weight: 800; color: var(--a-ink); display: flex; align-items: center; gap: 6px; }
.zc-sec > summary::-webkit-details-marker { display: none; }
.zc-sec > summary::before { content: ''; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 6px solid var(--a-ink-2); transform: rotate(-90deg); transition: transform .12s; }
.zc-sec[open] > summary::before { transform: none; }
.zc-sec-b { padding: 0 4px 8px; display: flex; flex-direction: column; }
.zc-cnt { background: #F1EDF5; color: var(--a-ink-2); font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0 6px; }
.zc-view { font: inherit; text-align: left; border: 0; background: transparent; padding: 5px 8px 5px 22px; font-size: 12.5px; color: var(--a-ink-2); border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-view:hover { background: #F4F0F6; }
.zc-view.on { color: var(--z-pink-ink); font-weight: 700; background: var(--z-pink-softer); }
.zc-fby { font-size: 13px; font-weight: 800; padding: 12px 8px 6px; }
.zc-fsearch { margin: 0 4px 6px; width: calc(100% - 8px) !important; height: 30px !important; }
.zc-none { color: #8E86B0; font-size: 12px; text-align: center; margin: 6px 0 4px; }
.zc-relmod { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--a-faint); padding: 8px 6px 2px; }
.zc-fp-head { display: none; }
.zt-fp-none { color: #8E86B0; font-size: 12px; text-align: center; margin: 8px 0; }
.zt-fp-ctl .zt-fp-vals { padding: 4px 0 2px; }
.rp-aggw { margin-left: auto; font-size: 12.5px; color: var(--a-muted); display: inline-flex; align-items: center; gap: 6px; }
.rp-agg { height: 28px !important; width: auto !important; font-size: 12.5px !important; }
.rp-grand { margin: 10px 2px 0; font-size: 12.5px; color: var(--a-muted); }
.rp-grand b { color: var(--a-ink); }
.rp-frow { grid-template-columns: 24px minmax(0, 1fr) 28px; grid-template-areas: 'n f d' '. v .'; }
.rp-frow > .zc-cond { grid-area: v; }
.rp-addfilter .rp-frow { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 2fr) 28px; grid-template-areas: 'n f v d'; align-items: start; }
.rp-addfilter .rp-frow .zc-cond { flex-direction: row; flex-wrap: wrap; }
.rp-addfilter .rp-frow .zc-cond > * { flex: 1 1 120px; }

/* mobile: the sidebar slides over the page (the resize rules above set it back to sticky) */
@media (max-width: 900px) {
  .zs-side { position: fixed !important; top: 0; bottom: 0; left: 0; height: auto; }
  .zt-fp.zt-fp, .zc-fp, .rp-left { position: static; }
}
@media (max-width: 900px) {
  .rp-home, .rp-editor, .zc-split, .zt-has-fp > .zt-body { grid-template-columns: minmax(0, 1fr) !important; }
  .rp-folders { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; align-items: center; gap: 4px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--z-line); }
  .rp-folders .rp-fhead, .rp-folders .rp-fempty, .rp-folders .zs-rsz { display: none; }
  .rp-fitem { width: auto; flex: none; white-space: nowrap; }
  .rp-main { padding: 12px; }
  .rp-mhead .search { width: 100%; }
  .view.zc { height: auto; }
}
@media (max-width: 900px) {
  .zs-side { height: 100vh !important; height: 100dvh !important; bottom: auto !important; overflow: hidden; }
  .zs-panel-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rp-home, .rp-editor, .zc-split, .zt-has-fp > .zt-body { grid-template-columns: minmax(0, 1fr) !important; }
  .rp-folders { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; align-items: center; gap: 4px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--z-line); }
  .rp-folders .rp-fhead, .rp-folders .rp-fempty, .rp-folders .zs-rsz { display: none; }
  .rp-fitem { width: auto; flex: none; white-space: nowrap; }
  .rp-main { padding: 12px; }
  .rp-mhead .search { width: 100%; }
  .view.zc { height: auto; }
}

/* Zoho "Click to select" multi-select */
.zc-pick { position: relative; }
.zc-pick-btn { font: inherit; width: 100%; min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; border: 1px solid #D9D2DC; border-radius: 6px; background: #fff; color: var(--a-ink); font-size: 12.5px; text-align: left; cursor: pointer; }
.zc-pick-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-pick-btn.empty span { color: #8E86B0; }
.zc-pick-btn i { display: grid; color: var(--a-muted); flex: none; }
.zc-pick-btn i svg { width: 13px; height: 13px; }
.zc-pick-btn[aria-expanded="true"] { border-color: var(--z-pink); box-shadow: 0 0 0 3px rgba(212,34,95,.12); }
.zc-pick-pop { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--z-line); border-radius: 8px; box-shadow: var(--shadow-pop); padding: 6px; }
.zc-pick-find { height: 28px !important; font-size: 12.5px !important; width: 100%; margin-bottom: 4px; }
.zc-pick-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; }
.zc-pick-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 12.5px; border-radius: 5px; cursor: pointer; }
.zc-pick-opt:hover { background: #F4F0F6; }
.zc-pick-opt input { accent-color: var(--z-pink); margin: 0; }