/* ============================================================
   shell.css — Phase 3 chrome: icons, collapsible sidebar,
   company switcher, command palette, breadcrumbs, menus.
   ============================================================ */

/* ---------------- icons ---------------- */
.i {
  width: 16px; height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------- icon button ---------------- */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  width: var(--control-h-md); height: var(--control-h-md);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.iconbtn:hover { background: var(--color-surface-2); color: var(--text-primary); border-color: var(--color-border-strong); }
.iconbtn .badge-count { position: absolute; top: -6px; right: -6px; }

/* ---------------- sidebar head ---------------- */
.side-head {
  display: flex; align-items: center; gap: var(--space-sm);
  margin: var(--space-xs) var(--space-sm) var(--space-lg);
}
#side h2 { margin: 0; flex: 1; min-width: 0; }
.brandmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-size: 14px; font-weight: var(--weight-bold);
  letter-spacing: -.02em;
}
.side-collapse { width: 28px; height: 28px; border-color: transparent; background: transparent; }
#app.side-collapsed .side-collapse .i { transform: rotate(180deg); }
#app.side-collapsed .side-head { justify-content: center; }
#app.side-collapsed #side h2 { flex: none; }

/* ---------------- collapsed sidebar ---------------- */
#app.side-collapsed .nav a { position: relative; }
/* tooltip on hover when only icons show */
#app.side-collapsed .nav a::after {
  content: attr(title);
  position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  background: var(--text-primary); color: var(--text-inverse);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  padding: 4px 8px; border-radius: var(--radius-sm);
  white-space: nowrap; pointer-events: none; opacity: 0; z-index: 30;
  transition: opacity var(--dur-fast) var(--ease);
  box-shadow: var(--shadow-md);
}
#app.side-collapsed .nav a:hover::after { opacity: 1; }
#app.side-collapsed .nav a .ico { margin: 0; }

/* ---------------- top bar layout ---------------- */
.topbar { align-items: center; }
.topbar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.topbar-main h1 { margin: 0; line-height: 1.2; }
.topbar-actions {
  display: flex; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap; min-width: 0;
}

/* ---------------- breadcrumbs ---------------- */
.crumbs {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--text-xs); color: var(--text-tertiary);
  min-height: 16px; flex-wrap: wrap;
}
.crumbs .i.sep { width: 12px; height: 12px; opacity: .55; }
.crumbs .crumb { color: var(--text-secondary); }
.crumbs .crumb.current { color: var(--text-secondary); font-weight: var(--weight-medium); }
.crumb-link {
  background: none; border: none; padding: 0;
  color: var(--text-tertiary); font-size: inherit; font-family: inherit;
}
.crumb-link:hover { color: var(--color-primary); text-decoration: underline; }

/* ---------------- search trigger ---------------- */
.searchtrigger {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  height: var(--control-h-md);
  min-width: 200px;
  padding: 0 var(--space-sm) 0 var(--space-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.searchtrigger:hover { border-color: var(--color-primary-border); background: var(--color-surface-2); }
.searchtrigger .st-label { flex: 1; text-align: left; }
.st-kbd, .palette kbd, .palette-foot kbd {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  white-space: nowrap;
}

/* ---------------- company switcher ---------------- */
.company-pick { position: relative; }
.coswitch {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  height: var(--control-h-md);
  max-width: 260px; min-width: 0;
  padding: 0 var(--space-sm) 0 var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.coswitch:hover { background: var(--color-surface-2); border-color: var(--color-primary-border); }
.co-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 11px; font-weight: var(--weight-bold);
}
.co-avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.co-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; }
.co-label { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; }
.co-name {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coswitch .chev { width: 14px; height: 14px; color: var(--text-tertiary); }

.comenu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  width: 320px; max-width: calc(100vw - var(--space-xl));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop var(--dur-fast) var(--ease);
}
.comenu-search {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--text-tertiary);
}
.comenu-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: var(--text-sm); color: var(--text-primary);
}
.comenu-list { max-height: 340px; overflow-y: auto; padding: var(--space-xs); }
.comenu-group {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-tertiary); font-weight: var(--weight-semibold);
  padding: var(--space-sm) var(--space-sm) var(--space-xs);
}
.comenu-empty { padding: var(--space-lg); color: var(--text-secondary); font-size: var(--text-sm); text-align: center; }
.corow {
  display: flex; align-items: center; gap: var(--space-sm);
  width: 100%; padding: var(--space-sm);
  background: transparent; border: none; border-radius: var(--radius-md);
  text-align: left; color: var(--text-primary);
}
.corow:hover { background: var(--color-surface-2); }
.corow.active { background: var(--color-primary-soft); }
.corow-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.corow-name { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corow-sub { font-size: var(--text-2xs); color: var(--text-tertiary); font-family: var(--font-mono); }
.corow-sub em { font-family: var(--font-sans); font-style: italic; }
.corow .tick { width: 15px; height: 15px; color: var(--color-success); }
.linkish { background: none; border: none; color: var(--color-primary); font: inherit; text-decoration: underline; padding: 0; }

/* ---------------- user menu ---------------- */
.usermenu { position: relative; }
.userbtn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  height: var(--control-h-md); padding: 0 var(--space-sm) 0 var(--space-xs);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--text-secondary);
}
.userbtn:hover { background: var(--color-surface-2); border-color: var(--color-border); }
.userbtn .hint { margin: 0; }
.userbtn .chev { width: 14px; height: 14px; }
.u-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: var(--radius-pill);
  background: var(--color-neutral); color: var(--text-inverse);
  font-size: 11px; font-weight: var(--weight-bold);
}
.dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xs);
  animation: pop var(--dur-fast) var(--ease);
}
.dropdown .dd-head {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-xs);
}
.dropdown .dd-head .hint { margin: 0; }
.dropdown button {
  display: flex; align-items: center; gap: var(--space-sm);
  width: 100%; padding: var(--space-sm) var(--space-md);
  background: transparent; border: none; border-radius: var(--radius-md);
  color: var(--text-primary); font-size: var(--text-sm); text-align: left;
}
.dropdown button:hover { background: var(--color-surface-2); }
.dropdown button.danger { color: var(--color-danger); }
.dropdown button.danger:hover { background: var(--color-danger-soft); }
.dd-sep { height: 1px; background: var(--color-border); margin: var(--space-xs) 0; }

/* ---------------- command palette ---------------- */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(16, 24, 40, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh var(--space-lg) var(--space-lg);
  animation: fade var(--dur-fast) var(--ease);
}
.palette {
  width: 100%; max-width: 620px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: pop var(--dur-base) var(--ease);
}
.palette-input {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  color: var(--text-tertiary);
}
.palette-input input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: var(--text-subhead); color: var(--text-primary);
}
.palette-results { max-height: 52vh; overflow-y: auto; padding: var(--space-xs); }
.palrow {
  display: flex; align-items: center; gap: var(--space-md);
  width: 100%; padding: var(--space-sm) var(--space-md);
  background: transparent; border: none; border-radius: var(--radius-md);
  text-align: left; color: var(--text-primary); font-size: var(--text-sm);
}
.palrow:hover { background: var(--color-surface-2); }
.palrow.sel { background: var(--color-primary-soft); }
.palrow .i { color: var(--text-tertiary); }
.palrow.sel .i { color: var(--color-primary); }
.palrow-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palrow-group {
  font-size: var(--text-2xs); color: var(--text-tertiary);
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palette-empty { padding: var(--space-2xl); text-align: center; color: var(--text-secondary); font-size: var(--text-sm); }
.palette-foot {
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--text-2xs); color: var(--text-tertiary);
}
.palette-foot span:last-child { margin-left: auto; }

/* ---------------- responsive chrome ---------------- */
@media (max-width: 1100px) {
  .searchtrigger { min-width: 44px; padding: 0 var(--space-sm); }
  .searchtrigger .st-label, .searchtrigger .st-kbd { display: none; }
}
@media (max-width: 900px) {
  .side-collapse { display: none; }          /* collapsing is meaningless as a drawer */
  .co-name { max-width: 120px; }
  .userbtn #whoami { display: none; }
}
@media (max-width: 640px) {
  .topbar-actions { width: 100%; gap: var(--space-xs); }
  .searchtrigger { flex: 1; min-width: 0; }
  .company-pick { flex: 1 1 100%; }
  .coswitch { width: 100%; max-width: none; }
  .co-name { max-width: none; }
  .comenu { width: 100%; right: auto; left: 0; }
  .palette-backdrop { padding: 6vh var(--space-md) var(--space-md); }
}

/* ---------------- the client list ----------------
   306 clients need a list, not a wall of chips. The row is the same .corow as
   the company switcher, so the two read as one thing. */
.clientlist-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-lg); flex-wrap: wrap;
}
.clientlist-count {
  font-size: var(--text-sm); color: var(--text-secondary);
  white-space: nowrap; padding-top: 2px;
}
.clientlist-count b { color: var(--text-primary); font-size: var(--text-md); }
.clientlist-count span { color: var(--text-tertiary); }
.clientlist-tools {
  display: flex; align-items: center; gap: var(--space-md);
  flex-wrap: wrap; margin: var(--space-lg) 0 var(--space-sm);
}
.clientlist-search {
  display: flex; align-items: center; gap: var(--space-sm);
  flex: 1 1 260px; min-width: 0; max-width: 420px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--text-tertiary);
}
.clientlist-search:focus-within { border-color: var(--color-primary-border); }
.clientlist-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: var(--text-sm); color: var(--text-primary);
}
.clientlist-filters { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.chipbtn {
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--text-secondary); font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.chipbtn:hover { background: var(--color-surface-2); }
.chipbtn.active {
  background: var(--color-primary-soft); color: var(--color-primary);
  border-color: var(--color-primary-border); font-weight: var(--weight-medium);
}
.clientlist { margin-top: var(--space-sm); }
.clientlist-letter {
  position: sticky; top: 0; z-index: 1;
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .08em;
  font-weight: var(--weight-semibold); color: var(--text-tertiary);
  background: var(--color-surface);
  padding: var(--space-sm) var(--space-xs) var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}
.clientlist-grid {
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  padding: var(--space-xs) 0 var(--space-md);
}
.clientlist .corow { border: 1px solid transparent; }
.clientlist .corow:hover { border-color: var(--color-border); }
.cl-state {
  font-family: var(--font-sans); color: var(--text-tertiary);
  text-transform: none; letter-spacing: 0;
}
.cl-state::before { content: "· "; }
.clientlist-empty {
  padding: var(--space-xl); text-align: center;
  color: var(--text-secondary); font-size: var(--text-sm);
}
/* On "Set up needed", what is MISSING is the reason the client is listed at
   all, so it takes the place of the GSTIN rather than sitting beside it. */
.cl-missing { font-family: var(--font-sans); color: var(--color-warning); }

/* ---- Profile Completeness ------------------------------------------ */
.setup-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.setup-stat{flex:1;min-width:150px;padding:12px 14px;border:1px solid var(--line);
            border-radius:10px;background:var(--panel)}
.setup-stat-n{font-size:28px;font-weight:700;line-height:1.15}
.setup-stat.ok .setup-stat-n{color:var(--green)}
.setup-stat.bad .setup-stat-n{color:var(--red)}
.setup-gap{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:10px;
           background:var(--panel)}
.setup-gap-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
                flex-wrap:wrap}
.setup-gap .desc{margin:6px 0 0}
.setup-gap .clientlist{margin-top:10px}

/* ---- multi-select variant of the client list ------------------------ */
.clientlist-bulk{display:flex;align-items:center;gap:8px;margin:6px 0 2px}
.corow-pick{cursor:pointer;align-items:center;gap:10px}
.corow-pick input[type=checkbox]{margin:0;flex:0 0 auto}
.corow-pick:hover{background:var(--panel2)}
.comenu-scope{text-transform:none;letter-spacing:0;line-height:1.45}

/* a profile block the client has been told does not apply */
.form-section.fs-off h4,
.form-section.fs-off label{color:var(--text-tertiary)}
.form-section.fs-off input:disabled,
.form-section.fs-off select:disabled{background:var(--panel2);color:var(--text-tertiary)}

/* ---- mailbox search + message preview -------------------------------- */
.gm-tbl td:first-child,.gm-tbl th:first-child{white-space:nowrap;padding-right:14px}
.gm-tbl td:nth-child(2),.gm-tbl th:nth-child(2){min-width:130px;padding-right:14px}
.gm-tbl td:nth-child(4){max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-row{cursor:pointer}
.gm-row:hover{background:var(--panel2)}
.gm-hdr td{padding:3px 6px;border:0}
.gm-body{white-space:pre-wrap;word-break:break-word;max-height:46vh;overflow:auto;
         margin-top:10px;padding:10px 12px;background:var(--panel2);
         border:1px solid var(--line);border-radius:8px;
         font-family:var(--font-mono);font-size:var(--text-2xs);line-height:1.55}