:root {
  --workspace-ink: #142033;
  --workspace-muted: #65738a;
  --workspace-soft: #f3f5f8;
  --workspace-bg: #eef1f5;
  --workspace-card: #ffffff;
  --workspace-line: #dce2ea;
  --workspace-line-strong: #c7d0dd;
  --workspace-navy: #071421;
  --workspace-navy-soft: #102236;
  --workspace-gold: #c8a45d;
  --workspace-gold-bright: #e6ca8b;
  --workspace-gold-soft: #f8f0df;
  --workspace-green: #15745a;
  --workspace-red: #a43f4f;
  --workspace-shadow: 0 18px 45px rgba(20, 32, 51, 0.08);
  --workspace-shadow-soft: 0 8px 24px rgba(20, 32, 51, 0.06);
  --workspace-radius-xl: 24px;
  --workspace-radius-lg: 18px;
  --workspace-radius-md: 13px;
  --workspace-sidebar-width: 278px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--workspace-bg);
}

body.workspace-body {
  min-height: 100vh;
  margin: 0;
  color: var(--workspace-ink);
  background:
    radial-gradient(circle at 86% 2%, rgba(200, 164, 93, 0.12), transparent 23rem),
    linear-gradient(180deg, #f5f7fa 0%, var(--workspace-bg) 100%);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

.workspace-frame {
  display: grid;
  min-height: 100vh;
  grid-template-columns: var(--workspace-sidebar-width) minmax(0, 1fr);
}

.workspace-sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  height: 100vh;
  flex-direction: column;
  color: #f6f1e6;
  background:
    radial-gradient(circle at 20% 0%, rgba(230, 202, 139, 0.14), transparent 18rem),
    linear-gradient(180deg, #071421 0%, #091827 55%, #06111d 100%);
  border-right: 1px solid rgba(230, 202, 139, 0.13);
  box-shadow: 16px 0 45px rgba(4, 12, 20, 0.08);
}

.workspace-brand {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.workspace-brand-link {
  display: flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
}

.workspace-brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #071421;
  background:
    linear-gradient(145deg, var(--workspace-gold-bright), var(--workspace-gold));
  border-radius: 14px;
  box-shadow: 0 9px 24px rgba(200, 164, 93, 0.24);
  font-size: 1.15rem;
  font-weight: 900;
}

.workspace-brand-link strong,
.workspace-brand-link small {
  display: block;
}

.workspace-brand-link strong {
  letter-spacing: 0.11em;
}

.workspace-brand-link small {
  margin-top: 3px;
  color: rgba(246, 241, 230, 0.62);
  font-size: 0.72rem;
}

.workspace-sidebar-close {
  display: none;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 1.7rem;
  cursor: pointer;
}

.workspace-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding: 24px 16px;
}

.workspace-nav-label {
  margin: 18px 10px 7px;
  color: rgba(246, 241, 230, 0.43);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.workspace-nav-label:first-child {
  margin-top: 0;
}

.workspace-nav a {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  color: rgba(246, 241, 230, 0.76);
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.workspace-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  transform: translateX(2px);
}

.workspace-nav a.is-active {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(200, 164, 93, 0.2), rgba(200, 164, 93, 0.07));
  border-color: rgba(230, 202, 139, 0.24);
  box-shadow: inset 3px 0 0 var(--workspace-gold);
}

.workspace-nav-icon {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  color: var(--workspace-gold-bright);
  background: rgba(255, 255, 255, 0.055);
  border-radius: 9px;
  font-size: 0.76rem;
  font-weight: 900;
}

.workspace-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 16px;
  padding: 14px;
  color: rgba(246, 241, 230, 0.72);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
}

.workspace-sidebar-footer strong,
.workspace-sidebar-footer small {
  display: block;
}

.workspace-sidebar-footer strong {
  color: #fff;
  font-size: 0.78rem;
}

.workspace-sidebar-footer small {
  margin-top: 2px;
  font-size: 0.67rem;
}

.status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  background: #59cca9;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(89, 204, 169, 0.12);
}

.workspace-main {
  min-width: 0;
}

.workspace-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 30px;
  background: rgba(247, 249, 251, 0.9);
  border-bottom: 1px solid rgba(199, 208, 221, 0.8);
  backdrop-filter: blur(16px);
}

.workspace-menu-button {
  display: none;
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  cursor: pointer;
}

.workspace-topbar-copy span,
.workspace-topbar-copy strong {
  display: block;
}

.workspace-topbar-kicker {
  margin-bottom: 2px;
  color: var(--workspace-gold);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.workspace-user {
  display: flex;
  align-items: center;
  gap: 11px;
}

.workspace-user-avatar {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #173652, #071421);
  border-radius: 12px;
  font-weight: 850;
}

.workspace-user-copy strong,
.workspace-user-copy small {
  display: block;
}

.workspace-user-copy strong {
  font-size: 0.83rem;
}

.workspace-user-copy small {
  color: var(--workspace-muted);
  font-size: 0.7rem;
}

.workspace-logout {
  min-height: 37px;
  padding: 0 14px;
  color: var(--workspace-ink);
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  cursor: pointer;
}

.workspace-content {
  width: min(1460px, 100%);
  margin: 0 auto;
  padding: 30px;
}

.workspace-messages {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.workspace-message {
  padding: 13px 15px;
  color: #0f5f49;
  background: #e8f7f1;
  border: 1px solid #bde7d8;
  border-radius: 12px;
}

.workspace-hero {
  position: relative;
  display: grid;
  min-height: 315px;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.65fr);
  align-items: center;
  gap: 40px;
  overflow: hidden;
  padding: clamp(30px, 5vw, 64px);
  color: #fff;
  background:
    radial-gradient(circle at 88% 24%, rgba(230, 202, 139, 0.24), transparent 19rem),
    linear-gradient(125deg, #071421 0%, #0e253a 62%, #142d45 100%);
  border: 1px solid rgba(230, 202, 139, 0.18);
  border-radius: var(--workspace-radius-xl);
  box-shadow: 0 25px 65px rgba(7, 20, 33, 0.18);
}

.workspace-hero::after {
  position: absolute;
  right: -90px;
  bottom: -145px;
  width: 360px;
  height: 360px;
  content: "";
  border: 1px solid rgba(230, 202, 139, 0.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 45px rgba(230, 202, 139, 0.035),
    0 0 0 90px rgba(230, 202, 139, 0.025);
}

.workspace-hero > * {
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--workspace-gold);
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.workspace-hero h1,
.page-header h1 {
  margin: 0;
  letter-spacing: -0.045em;
}

.workspace-hero h1 {
  max-width: 800px;
  font-size: clamp(2.35rem, 5vw, 4.65rem);
  line-height: 0.98;
}

.workspace-hero p {
  max-width: 760px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.71);
  font-size: 1.05rem;
  line-height: 1.75;
}

.hero-actions,
.app-actions,
.page-header-actions,
.crm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-actions {
  margin-top: 29px;
}

.workspace-hero-panel {
  padding: 24px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  backdrop-filter: blur(12px);
}

.hero-panel-label {
  color: var(--workspace-gold-bright);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-panel-number {
  margin: 10px 0 2px;
  color: #fff;
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1;
}

.workspace-hero-panel > span:not(.hero-panel-label) {
  color: rgba(255, 255, 255, 0.68);
}

.hero-panel-meta {
  display: grid;
  gap: 9px;
  margin-top: 22px;
  padding-top: 18px;
  color: rgba(255, 255, 255, 0.74);
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 0.78rem;
}

/* The Pending Action Centre breakdown: every contributing queue links
   to where its items are worked (owner, 13 Aug 2026 — "32 items" with
   no way to locate them). */
.hero-panel-breakdown {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding: 12px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 0.8rem;
}

.hero-panel-breakdown a {
  color: #e8c66a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero-panel-breakdown a:hover {
  color: #f5dd9a;
}

.button,
button.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 780;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.button:hover {
  transform: translateY(-1px);
}

/* `.qo-btn` is excluded so the QERIONN Operations UX System can express a real
   button hierarchy (primary / secondary / tertiary / danger / quiet) instead of
   inheriting gold on every control. Adding one exclusion here is what makes the
   new layer work without !important, and leaves every unmigrated screen exactly
   as it renders today. See docs/QERIONN_PREMIUM_INTERNAL_OPERATIONS_UX_SYSTEM_SCOPE_20260809.md §5.2. */
.button-primary,
button:not(.workspace-logout):not(.workspace-menu-button):not(.workspace-sidebar-close):not(.qo-btn) {
  color: #071421;
  background: linear-gradient(145deg, var(--workspace-gold-bright), var(--workspace-gold));
  border-color: rgba(112, 84, 29, 0.18);
  box-shadow: 0 10px 24px rgba(200, 164, 93, 0.18);
}

.button-primary:hover {
  box-shadow: 0 14px 30px rgba(200, 164, 93, 0.28);
}

.button-secondary,
.crm-button-secondary {
  color: var(--workspace-ink);
  background: #fff;
  border-color: var(--workspace-line);
}

.button-secondary:hover,
.crm-button-secondary:hover {
  border-color: var(--workspace-gold);
  box-shadow: var(--workspace-shadow-soft);
}

.button-disabled {
  color: #8e98a8;
  background: #eef1f4;
  border-color: #e0e5eb;
  box-shadow: none;
  cursor: not-allowed;
}

.button-block {
  width: 100%;
}

.metric-grid,
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.metric-card,
.card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  background: var(--workspace-card);
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  box-shadow: var(--workspace-shadow-soft);
}

.metric-card::before {
  position: absolute;
  top: 0;
  left: 22px;
  width: 42px;
  height: 3px;
  content: "";
  background: var(--workspace-gold);
  border-radius: 0 0 999px 999px;
}

.metric-card span,
.metric-card small {
  display: block;
  color: var(--workspace-muted);
}

.metric-card > strong,
.metric {
  display: block;
  margin: 8px 0 5px;
  color: var(--workspace-ink);
  font-size: 2rem;
  font-weight: 900;
}

.metric-status {
  color: var(--workspace-green) !important;
  font-size: 1.55rem !important;
}

.workspace-section {
  margin-top: 34px;
}

.section-heading,
.crm-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.section-heading h2,
.section-card h2,
.form-summary-card h2 {
  margin: 0;
  letter-spacing: -0.025em;
}

.section-heading a {
  color: #88691f;
  font-weight: 750;
  text-decoration: none;
}

.section-lead {
  max-width: 850px;
  color: var(--workspace-muted);
  line-height: 1.7;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}

.app-card[hidden],
.app-category-section[hidden],
.app-card.is-filtered-out,
.app-category-section.is-filtered-out,
.app-catalogue .qo-board__column[hidden],
.app-catalogue .qo-board__column.is-filtered-out,
.app-catalogue .app-card[data-app-hidden="1"],
.app-catalogue .app-category-section[data-app-hidden="1"] {
  display: none !important;
}

.app-card {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  box-shadow: var(--workspace-shadow-soft);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.app-card-active:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 164, 93, 0.7);
  box-shadow: var(--workspace-shadow);
}

.app-card-disabled {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(243, 245, 248, 0.95));
}

.app-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Journey progress console. Lifted out of an inline <style> block in
   dashboard.html for the same reason as the pinning controls below: a
   component defined inside one template is a component no stylesheet audit
   can see, and the workspace already owns every other card on that page. */
.journey-console-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.journey-console-card {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  box-shadow: var(--workspace-shadow-soft);
}

.journey-console-head,
.journey-console-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.journey-console-card h3 {
  margin: 6px 0 0;
  font-size: 1.05rem;
}

.journey-console-card p {
  min-height: 44px;
  margin: 18px 0;
  color: var(--workspace-muted);
  line-height: 1.55;
}

.journey-progress-track {
  height: 9px;
  overflow: hidden;
  background: #e8edf3;
  border-radius: 999px;
}

.journey-progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--workspace-gold), var(--workspace-gold-bright));
  border-radius: inherit;
}

.journey-console-meta {
  margin-top: 12px;
}

.journey-console-meta a {
  color: var(--workspace-navy-soft);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .journey-console-grid {
    grid-template-columns: 1fr;
  }
}

/* Pinning controls. These lived in an inline <style> block in apps.html, which
   meant the catalogue's own component styling was invisible to every tool that
   reads this stylesheet — including the audit that asks which screens still
   carry a private design island. They belong with `.app-card`, which is here. */
.app-pin-button {
  border: 1px solid var(--workspace-line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.app-pin-button[aria-pressed="true"] {
  border-color: var(--workspace-gold);
  background: #fff8df;
}

.app-card.is-pinned {
  outline: 2px solid rgba(197, 151, 45, 0.35);
  outline-offset: 2px;
}

.app-pinned-section {
  margin-bottom: 28px;
}

.app-symbol {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #173652, #071421);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(7, 20, 33, 0.15);
  font-size: 1.1rem;
  font-weight: 900;
}

.status-chip,
.crm-chip,
.reference-chip,
.crm-reference,
.provider-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.035em;
}

.status-active {
  color: #0f664e;
  background: #e4f6ef;
  border: 1px solid #bce7d8;
}

.status-coming {
  color: #7a6226;
  background: #fbf4e4;
  border: 1px solid #ead59f;
}

.app-category {
  margin-top: 14px;
  color: var(--workspace-gold);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.app-catalogue .app-category-section:not(:has(.app-card)) {
  display: none;
}

.app-card .status-chip.status-active {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--workspace-muted);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
}

.app-card-disabled .app-actions .qo-btn:disabled {
  min-height: 36px;
  opacity: 0.72;
}

.app-card h3 {
  margin: 8px 0 8px;
  font-size: 1.3rem;
  letter-spacing: -0.025em;
}

.app-card p {
  margin: 0;
  color: var(--qo-text-secondary, #4d5b70);
  line-height: 1.65;
}

.app-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.app-metrics div {
  padding: 10px;
  background: var(--workspace-soft);
  border: 1px solid #e7ebf0;
  border-radius: 11px;
}

.app-metrics strong,
.app-metrics span {
  display: block;
}

.app-metrics span {
  margin-top: 2px;
  color: var(--workspace-muted);
  font-size: 0.66rem;
}

.app-actions {
  margin-top: auto;
  padding-top: 22px;
}

/* All Apps compact catalogue — shrink chrome, keep title + one-line
   description + status chip. Scoped so the dashboard featured grid stays. */
.app-group-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  max-width: 100%;
}

.app-group-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--workspace-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--workspace-ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
}

.app-group-heading {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

.app-group-heading.is-active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-group-chip.is-active {
  background: #07101f;
  border-color: #07101f;
  color: #f4f0e6;
}

.app-catalogue .app-kanban.qo-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
  gap: 12px;
}

.app-catalogue .qo-board__column {
  padding: 10px;
}

.app-catalogue .app-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-catalogue #app-pinned-grid.app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.app-catalogue .app-card {
  padding: 10px 12px;
  border-radius: 12px;
  min-height: 44px;
  box-shadow: none;
}

.app-catalogue .app-card-active:hover {
  transform: translateY(-1px);
}

.app-catalogue .app-symbol {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.78rem;
  box-shadow: none;
}

.app-catalogue .app-pin-button {
  min-height: 32px;
  min-width: 44px;
  padding: 4px 8px;
  font-size: 0.7rem;
}

.app-catalogue .app-pin-button[aria-pressed="true"] {
  border-color: #c9a227;
  background: #f0d58a;
  color: #07101f;
}

.app-catalogue .app-category {
  margin-top: 6px;
  color: #6b5218;
  font-size: 0.62rem;
}

.app-catalogue .app-card h3 {
  margin: 2px 0 2px;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.app-catalogue .app-card p {
  overflow: hidden;
  color: #3d4a5c;
  font-size: 0.75rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-catalogue .app-card .status-chip.status-active {
  padding: 3px 8px;
  border: 1px solid #bce7d8;
  background: #e4f6ef;
  color: #0f664e;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: none;
}

.app-catalogue .status-chip.status-coming {
  padding: 3px 8px;
  border: 1px solid #c9a227;
  background: #f0d58a;
  color: #07101f;
}

.app-catalogue .app-metrics {
  margin-top: 8px;
  gap: 6px;
}

.app-catalogue .app-metrics div {
  padding: 6px;
}

.app-catalogue .app-actions {
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.app-catalogue .app-actions a,
.app-catalogue .app-actions .qo-btn,
.app-catalogue a[data-app-open] {
  position: relative;
  z-index: 4;
  pointer-events: auto;
}

.app-catalogue .app-card-active {
  cursor: pointer;
}

.app-catalogue .section-heading,
.app-catalogue .qo-board__column-head {
  margin-bottom: 8px;
}

.app-catalogue .section-heading h2,
.app-catalogue .qo-board__column-title {
  font-size: 0.95rem;
}

.app-catalogue .app-category-section:not(:has(.app-card)) {
  display: none;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 22px;
}

.page-header h1 {
  font-size: clamp(2rem, 4vw, 3.15rem);
}

.page-header p {
  max-width: 780px;
  margin: 9px 0 0;
  color: var(--workspace-muted);
  line-height: 1.65;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  color: var(--workspace-muted);
  font-size: 0.75rem;
}

.breadcrumb a {
  color: #80611b;
  text-decoration: none;
}

.app-search-panel {
  margin-bottom: 28px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  box-shadow: var(--workspace-shadow-soft);
}

.app-search-panel label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.77rem;
  font-weight: 800;
}

.app-search-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.app-search-row input {
  flex: 1;
}

.app-search-row span {
  color: var(--workspace-muted);
  font-size: 0.75rem;
}

.app-category-section {
  margin-bottom: 38px;
}

.empty-state,
.crm-empty {
  padding: 42px 24px;
  color: var(--workspace-ink);
  text-align: center;
  background: #fff;
  border: 1px dashed var(--workspace-line-strong);
  border-radius: var(--workspace-radius-lg);
}

.empty-state-icon {
  display: block;
  color: var(--workspace-gold);
  font-size: 2.6rem;
}

.empty-state h2 {
  color: var(--workspace-ink);
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  box-shadow: var(--workspace-shadow-soft);
}

th,
td {
  padding: 14px 15px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e7ebf0;
}

th {
  color: #536176;
  background: #f7f8fa;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

tbody tr {
  transition: background 0.16s ease;
}

tbody tr:hover {
  background: #fbfaf7;
}

tbody tr:last-child td {
  border-bottom: 0;
}

code {
  color: #735817;
  background: var(--workspace-gold-soft);
  border: 1px solid #ead6a8;
  border-radius: 7px;
  padding: 3px 6px;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.muted {
  color: var(--workspace-muted);
}

.crm-shell {
  display: grid;
  gap: 4px;
}

.crm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 17px;
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  box-shadow: var(--workspace-shadow-soft);
}

.crm-toolbar form {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.crm-toolbar input,
.crm-toolbar select {
  min-width: 155px;
}

.form-control,
.app-search-row input,
.crm-toolbar input,
.crm-toolbar select,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 45px;
  padding: 10px 12px;
  color: var(--workspace-ink);
  background: #fff;
  border: 1px solid var(--workspace-line-strong);
  border-radius: 11px;
  outline: none;
  transition:
    border-color 0.17s ease,
    box-shadow 0.17s ease,
    background 0.17s ease;
}

textarea,
textarea.form-control {
  min-height: 98px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--workspace-gold);
  box-shadow: 0 0 0 4px rgba(200, 164, 93, 0.13);
}

select {
  cursor: pointer;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #9a7628;
}

.form-layout,
.crm-grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.65fr);
  gap: 20px;
  align-items: start;
}

.form-sections {
  display: grid;
  gap: 18px;
}

.section-card {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  box-shadow: var(--workspace-shadow-soft);
}

.section-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 21px;
  padding-bottom: 17px;
  border-bottom: 1px solid #e8ebef;
}

.section-card-heading > div {
  flex: 1;
}

.section-card-heading p {
  margin: 5px 0 0;
  color: var(--workspace-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.section-number {
  display: grid;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  place-items: center;
  color: #775a18;
  background: var(--workspace-gold-soft);
  border: 1px solid #e7cf99;
  border-radius: 10px;
  font-size: 0.69rem;
  font-weight: 900;
}

.form-grid,
.crm-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-field {
  min-width: 0;
}

.form-field-full,
.crm-field-full {
  grid-column: 1 / -1;
}

.form-field > label:not(.checkbox-label),
.crm-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.77rem;
  font-weight: 800;
}

.form-field label em {
  color: var(--workspace-red);
  font-style: normal;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 45px;
  padding: 10px 12px;
  background: #f8f9fb;
  border: 1px solid var(--workspace-line);
  border-radius: 11px;
  cursor: pointer;
}

.field-help,
.helptext {
  display: block;
  margin-top: 6px;
  color: var(--workspace-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.field-error,
.crm-error {
  display: block;
  margin-top: 6px;
  color: var(--workspace-red);
  font-size: 0.73rem;
  font-weight: 700;
}

.form-errors,
.crm-form-errors {
  margin-bottom: 17px;
  padding: 14px;
  color: #852d3b;
  background: #fcecee;
  border: 1px solid #efc2c9;
  border-radius: 12px;
}

.form-summary-card,
.crm-summary {
  position: sticky;
  top: 96px;
  padding: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 164, 93, 0.16), transparent 13rem),
    #fff;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  box-shadow: var(--workspace-shadow);
}

.reference-chip,
.crm-reference {
  margin-top: 10px;
  color: #735817;
  background: var(--workspace-gold-soft);
  border: 1px solid #e7cf99;
}

.summary-checklist {
  display: grid;
  gap: 10px;
  margin: 22px 0;
  color: #4d5b70;
  font-size: 0.79rem;
}

.summary-checklist div {
  display: flex;
  gap: 8px;
}

.summary-checklist span {
  color: var(--workspace-green);
  font-weight: 900;
}

.summary-notice,
.crm-deferred {
  padding: 13px;
  color: #71571e;
  background: #fbf5e8;
  border: 1px solid #ead8af;
  border-radius: 11px;
  font-size: 0.74rem;
  line-height: 1.55;
}

.sticky-form-actions {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.address-autofill-shell {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 19px;
  padding: 14px;
  background:
    linear-gradient(100deg, #f7f2e8, #fbfaf7);
  border: 1px dashed #d8bf88;
  border-radius: 13px;
}

.address-autofill-shell strong,
.address-autofill-shell small {
  display: block;
}

.address-autofill-shell strong {
  font-size: 0.8rem;
}

.address-autofill-shell small {
  margin-top: 3px;
  color: var(--workspace-muted);
  font-size: 0.69rem;
}

.address-autofill-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #7c5e1a;
  background: #fff;
  border: 1px solid #e2c88f;
  border-radius: 11px;
  font-size: 1.15rem;
}

.provider-chip {
  color: #745919;
  background: #fbf3df;
  border: 1px solid #e6d09d;
  white-space: nowrap;
}

.searchable-select {
  position: relative;
  display: grid;
  gap: 6px;
}

.searchable-select-search {
  min-height: 38px !important;
  padding: 8px 10px !important;
  background: #f8f9fb !important;
  font-size: 0.75rem !important;
}

.crm-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.crm-nav a {
  padding: 9px 12px;
  color: var(--workspace-ink);
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  text-decoration: none;
}

.crm-nav a:hover {
  border-color: var(--workspace-gold);
}

.crm-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.crm-metric {
  padding: 13px;
  background: var(--workspace-soft);
  border: 1px solid #e5e9ef;
  border-radius: 12px;
}

.crm-metric strong {
  display: block;
  margin-top: 4px;
  font-size: 1.25rem;
}

.crm-summary-list {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

.crm-summary-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--workspace-line);
}

.crm-record {
  margin-bottom: 12px;
}

.crm-record-title {
  font-weight: 800;
}

.crm-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 14px;
}

.workspace-overlay {
  display: none;
}

@media (max-width: 1180px) {
  .metric-grid,
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-hero {
    grid-template-columns: 1fr;
  }

  .workspace-hero-panel {
    max-width: 420px;
  }
}

@media (max-width: 920px) {
  .workspace-frame {
    display: block;
  }

  .workspace-sidebar {
    position: fixed;
    left: 0;
    transform: translateX(-102%);
    width: min(310px, 88vw);
    transition: transform 0.22s ease;
  }

  body.workspace-nav-open .workspace-sidebar {
    transform: translateX(0);
  }

  .workspace-sidebar-close,
  .workspace-menu-button {
    display: block;
  }

  .workspace-overlay {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(3, 10, 17, 0.55);
    backdrop-filter: blur(2px);
  }

  body.workspace-nav-open .workspace-overlay {
    display: block;
  }

  .workspace-topbar {
    padding: 12px 18px;
  }

  .workspace-content {
    padding: 20px;
  }

  .form-layout,
  .crm-grid-two {
    grid-template-columns: 1fr;
  }

  .form-summary-card,
  .crm-summary {
    position: static;
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  .workspace-topbar-copy,
  .workspace-user-copy {
    display: none;
  }

  .workspace-user {
    margin-left: auto;
  }

  .workspace-content {
    padding: 15px;
  }

  .workspace-hero {
    min-height: auto;
    padding: 28px 22px;
    border-radius: 19px;
  }

  .workspace-hero h1 {
    font-size: 2.45rem;
  }

  .metric-grid,
  .grid,
  .app-grid,
  .form-grid,
  .crm-fields,
  .crm-metrics {
    grid-template-columns: 1fr;
  }

  .form-field-full,
  .crm-field-full {
    grid-column: auto;
  }

  .section-card,
  .form-summary-card,
  .metric-card,
  .card,
  .app-card {
    padding: 18px;
  }

  .app-catalogue .app-card {
    padding: 10px 12px;
  }

  .section-card-heading {
    flex-wrap: wrap;
  }

  .provider-chip {
    white-space: normal;
  }

  .app-search-row,
  .crm-toolbar form,
  .crm-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-toolbar input,
  .crm-toolbar select {
    width: 100%;
  }

  .workspace-logout {
    padding: 0 10px;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* A1_VISUAL_RESCUE_ROUND2_START */

.q-page-back-shell{
  width:100%;
  margin-bottom:14px
}

.q-page-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(15,35,56,.13);
  border-radius:999px;
  color:#17304a;
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 22px rgba(12,28,46,.06);
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:760;
  transition:transform .18s ease,border-color .18s ease
}

.q-page-back:hover{
  transform:translateX(-2px);
  border-color:rgba(183,137,47,.46)
}

.crm-shell{
  width:100%;
  max-width:none
}

.q-native-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}

.q-combobox{
  position:relative;
  width:100%
}

.q-combobox-input{
  width:100%;
  min-height:46px;
  padding:0 42px 0 13px;
  border:1px solid #d9e0e8;
  border-radius:11px;
  color:#14213d;
  background:
    linear-gradient(45deg,transparent 50%,#637186 50%) calc(100% - 18px) 50%/5px 5px no-repeat,
    linear-gradient(135deg,#637186 50%,transparent 50%) calc(100% - 13px) 50%/5px 5px no-repeat,
    #fff;
  outline:none;
  font:inherit
}

.q-combobox-input:focus{
  border-color:#b58b36;
  box-shadow:0 0 0 4px rgba(214,178,94,.14)
}

.q-combobox-menu{
  position:absolute;
  z-index:300;
  top:calc(100% + 7px);
  right:0;
  left:0;
  max-height:280px;
  overflow-y:auto;
  padding:7px;
  border:1px solid rgba(15,35,56,.13);
  border-radius:13px;
  background:#fff;
  box-shadow:0 22px 48px rgba(12,28,46,.18)
}

.q-combobox-option{
  width:100%;
  min-height:38px;
  padding:9px 11px;
  border:0;
  border-radius:9px;
  color:#17304a;
  background:transparent;
  cursor:pointer;
  text-align:left;
  font:inherit
}

.q-combobox-option:hover,
.q-combobox-option:focus,
.q-combobox-option.is-selected{
  outline:none;
  background:#f5efe0
}

.q-combobox-option.is-selected{
  color:#785711;
  font-weight:760
}

.q-combobox-empty{
  padding:12px;
  color:#718096;
  text-align:center;
  font-size:13px
}

.q-billing-copy-note{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border:1px solid rgba(214,178,94,.3);
  border-radius:12px;
  color:#6f5418;
  background:#fff9e9
}

.q-billing-copy-note span{
  color:#7a6b49;
  font-size:12px
}

[data-billing-section].is-using-registered-address{
  border-color:rgba(214,178,94,.36)
}

@media(max-width:980px){
  .crm-grid-two,
  .crm-fields{
    grid-template-columns:1fr
  }
}

/* A1_VISUAL_RESCUE_ROUND2_END */


/* CLIENT_SEARCH_TYPEAHEAD_V1_START */
.q-client-search{
  position:relative;
  width:100%;
}

.q-client-search > input{
  width:100%;
}

.q-client-search-menu{
  position:absolute;
  z-index:420;
  top:calc(100% + 7px);
  right:0;
  left:0;
  max-height:320px;
  overflow-y:auto;
  padding:7px;
  border:1px solid rgba(15,35,56,.14);
  border-radius:13px;
  background:#fff;
  box-shadow:0 22px 48px rgba(12,28,46,.18);
}

.q-client-search-option{
  display:flex !important;
  width:100% !important;
  min-height:54px !important;
  flex-direction:column;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:3px;
  padding:9px 11px !important;
  border:0 !important;
  border-radius:9px !important;
  color:#17304a !important;
  background:transparent !important;
  box-shadow:none !important;
  text-align:left !important;
  transform:none !important;
}

.q-client-search-option:hover,
.q-client-search-option:focus,
.q-client-search-option.is-active{
  outline:none !important;
  background:#f5efe0 !important;
}

.q-client-search-primary{
  font-size:13px;
  font-weight:780;
}

.q-client-search-meta{
  color:#6f7d90;
  font-size:11px;
  font-weight:560;
}

.q-client-search-empty{
  padding:15px 12px;
  color:#718096;
  text-align:center;
  font-size:13px;
}

/* Prevent global button styling from turning combobox rows into oversized gold bars. */
.q-combobox-option{
  min-height:38px !important;
  padding:9px 11px !important;
  border:0 !important;
  border-radius:9px !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

.q-combobox-option:hover,
.q-combobox-option:focus,
.q-combobox-option.is-selected{
  background:#f5efe0 !important;
}
/* CLIENT_SEARCH_TYPEAHEAD_V1_END */


/* QERIONN_APPROVED_BRAND_V1_START */
.workspace-brand-link{
  min-width:0;
  flex:1;
  gap:10px;
}

.workspace-brand-logo{
  display:block;
  width:184px;
  max-width:calc(100% - 46px);
  height:48px;
  object-fit:contain;
  object-position:left center;
}

.workspace-brand-context{
  display:flex;
  min-width:0;
  align-items:center;
}

.workspace-brand-context small{
  color:#93a4b7;
  font-size:10px;
  letter-spacing:.035em;
  white-space:nowrap;
}

.workspace-brand-mark{
  display:none!important;
}
/* QERIONN_APPROVED_BRAND_V1_END */


/* QERIONN_SIDEBAR_BRAND_RESCUE_V3B_START */
.workspace-brand{
  min-height:112px;
  align-items:flex-start;
  padding:17px 18px 15px;
}

.workspace-brand-link{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  width:100%;
}

.workspace-brand-logo{
  width:214px;
  max-width:100%;
  height:58px;
  object-fit:contain;
  object-position:left center;
}

.workspace-brand-context{
  width:100%;
  padding-left:5px;
}

.workspace-brand-context small{
  color:#8596a9;
  font-size:9px;
  letter-spacing:.085em;
  text-transform:uppercase;
}

@media(max-width:920px){
  .workspace-brand{
    align-items:flex-start;
  }

  .workspace-brand-link{
    max-width:220px;
  }
}
/* QERIONN_SIDEBAR_BRAND_RESCUE_V3B_END */


/* QERIONN_WORKSPACE_HERO_V4_START */
.workspace-hero{
  min-height:275px;
  padding:clamp(28px,4vw,50px);
}

.workspace-hero h1{
  max-width:610px;
  font-size:clamp(2.15rem,3.25vw,3.45rem);
  line-height:1.03;
  letter-spacing:-.035em;
}

.workspace-hero p{
  max-width:680px;
  margin-top:18px;
  font-size:1rem;
  line-height:1.65;
}

.hero-actions{
  margin-top:24px;
}

@media(max-width:680px){
  .workspace-hero h1{
    font-size:2.25rem;
  }
}
/* QERIONN_WORKSPACE_HERO_V4_END */

/* QERIONN_WORKSPACE_NAV_V2_START
   Category-grouped, per-app-accented, collapsible navigation rail
   (owner, 15 Aug 2026). Each nav link carries its own --nav-accent;
   the accent tints the icon chip at rest and paints the full pill,
   glow and left bar when the link is active. Groups collapse
   individually; the whole rail collapses to a 78px icon strip on
   desktop (never on the ≤920px off-canvas layout, which keeps its
   own open/close behaviour). */

.workspace-nav a {
  position: relative;
}

.workspace-nav-icon {
  color: var(--nav-accent, var(--workspace-gold-bright));
  background:
    color-mix(in srgb, var(--nav-accent, var(--workspace-gold-bright)) 14%, transparent);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.workspace-nav a.is-active {
  color: #fff;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--nav-accent, var(--workspace-gold)) 30%, transparent),
      color-mix(in srgb, var(--nav-accent, var(--workspace-gold)) 9%, transparent)
    );
  border-color: color-mix(in srgb, var(--nav-accent, var(--workspace-gold)) 34%, transparent);
  box-shadow:
    inset 3px 0 0 var(--nav-accent, var(--workspace-gold)),
    0 8px 22px -12px var(--nav-accent, var(--workspace-gold));
}

.workspace-nav a.is-active .workspace-nav-icon {
  color: #08131f;
  background: var(--nav-accent, var(--workspace-gold-bright));
  box-shadow: 0 0 16px -3px var(--nav-accent, var(--workspace-gold-bright));
}

.workspace-nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.workspace-nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  color: rgba(246, 241, 230, 0.5);
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.workspace-nav-group-toggle:hover {
  color: rgba(246, 241, 230, 0.85);
  background: rgba(255, 255, 255, 0.045);
}

.workspace-nav-group-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: var(--nav-accent, var(--workspace-gold-bright));
  border-radius: 50%;
  box-shadow: 0 0 8px color-mix(in srgb, var(--nav-accent, var(--workspace-gold-bright)) 55%, transparent);
}

.workspace-nav-group-title {
  flex: 1;
  min-width: 0;
}

.workspace-nav-chevron {
  font-size: 0.72rem;
  transition: transform 0.18s ease;
}

.workspace-nav-group.is-closed .workspace-nav-chevron {
  transform: rotate(-90deg);
}

.workspace-nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workspace-nav-group.is-closed .workspace-nav-group-items {
  display: none;
}

.workspace-collapse-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 16px 0;
  padding: 8px 11px;
  color: rgba(246, 241, 230, 0.62);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: color 0.18s ease, background 0.18s ease;
}

.workspace-collapse-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
}

@media (max-width: 920px) {
  /* The off-canvas drawer always shows full labels; the icon-strip
     collapse is a desktop-only behaviour. */
  .workspace-collapse-toggle {
    display: none;
  }
}

@media (min-width: 921px) {
  body.workspace-side-collapsed .workspace-frame {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  body.workspace-side-collapsed .workspace-brand {
    justify-content: center;
    padding: 20px 10px;
  }

  body.workspace-side-collapsed .workspace-brand-logo,
  body.workspace-side-collapsed .workspace-brand-context,
  body.workspace-side-collapsed .workspace-nav-text,
  body.workspace-side-collapsed .workspace-nav-group-title,
  body.workspace-side-collapsed .workspace-nav-chevron,
  body.workspace-side-collapsed .workspace-sidebar-footer {
    display: none;
  }

  body.workspace-side-collapsed .workspace-brand-link::before {
    content: "Q";
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #071421;
    background: linear-gradient(145deg, var(--workspace-gold-bright), var(--workspace-gold));
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 900;
  }

  body.workspace-side-collapsed .workspace-nav {
    padding: 18px 12px;
  }

  body.workspace-side-collapsed .workspace-nav a {
    justify-content: center;
    padding: 9px 0;
  }

  body.workspace-side-collapsed .workspace-nav-group-toggle {
    justify-content: center;
    padding: 8px 0 2px;
    pointer-events: none;
  }

  /* Icon strip shows every app even when its group was collapsed —
     a closed group with invisible items would read as missing apps. */
  body.workspace-side-collapsed .workspace-nav-group.is-closed .workspace-nav-group-items {
    display: flex;
  }

  body.workspace-side-collapsed .workspace-collapse-toggle {
    justify-content: center;
    margin: 4px 12px 12px;
    padding: 8px 0;
  }

  body.workspace-side-collapsed .workspace-collapse-toggle {
    position: relative;
  }
}

/* Collapsed-rail icon tooltip (owner, 16 Aug 2026: "collapse sidebar
   hone par tooltip set kar icons par"). Rendered by premium_workspace.js
   as a FIXED-position node, never a link ::after — .workspace-nav
   scrolls (overflow-y: auto), and an absolutely-positioned tooltip
   reaching past the 78px rail was clipped by that scroll box, so
   hovering an icon showed nothing. */
.workspace-nav-tip {
  position: fixed;
  z-index: 320;
  padding: 6px 11px;
  color: var(--workspace-ink);
  background: #ffffff;
  border: 1px solid var(--workspace-line-strong);
  border-radius: 9px;
  box-shadow: var(--workspace-shadow-soft);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
/* QERIONN_WORKSPACE_NAV_V2_END */

/* QERIONN_DASHBOARD_ANALYTICS_V1_START
   The analytics strip on the workspace dashboard: chart cards, the
   customise popover and the recent-intake list. Charts are inline SVG
   drawn by workspace_dashboard_charts.js from the JSON the view
   provides; these rules only lay out the cards. */

.dashboard-analytics-head {
  position: relative;
}

.dashboard-customise-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-customise-panel {
  position: absolute;
  z-index: 25;
  right: 0;
  top: calc(100% + 10px);
  min-width: 240px;
  padding: 16px;
  background: var(--workspace-card);
  border: 1px solid var(--workspace-line-strong);
  border-radius: var(--workspace-radius-md);
  box-shadow: var(--workspace-shadow);
}

.dashboard-customise-panel[hidden] {
  display: none;
}

.dashboard-customise-panel strong {
  display: block;
  margin-bottom: 10px;
  font-size: 0.82rem;
}

.dashboard-customise-panel label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 2px;
  font-size: 0.88rem;
  cursor: pointer;
}

.dashboard-customise-panel small {
  display: block;
  margin-top: 10px;
  color: var(--workspace-muted);
  font-size: 0.72rem;
}

.dashboard-chart-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  margin-top: 18px;
}

.dashboard-chart-grid + .dashboard-chart-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.dashboard-chart-card {
  min-width: 0;
  padding: 20px 22px;
  background: var(--workspace-card);
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  box-shadow: var(--workspace-shadow-soft);
}

.dashboard-chart-card h3 {
  margin: 0 0 2px;
  font-size: 1rem;
}

.dashboard-chart-card > p {
  margin: 0 0 14px;
  color: var(--workspace-muted);
  font-size: 0.8rem;
}

.dashboard-chart-card svg {
  display: block;
  width: 100%;
  height: auto;
}

.dashboard-chart-empty {
  padding: 26px 0;
  color: var(--workspace-muted);
  font-size: 0.85rem;
  text-align: center;
}

.dashboard-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--workspace-muted);
}

.dashboard-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dashboard-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  font-style: normal;
}

.dashboard-recent-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard-recent-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--workspace-line);
  font-size: 0.88rem;
}

.dashboard-recent-list li:last-child {
  border-bottom: 0;
}

.dashboard-recent-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  color: #fff;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 800;
}

.dashboard-recent-list li > div {
  min-width: 0;
  flex: 1;
}

.dashboard-recent-list strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-recent-list small {
  color: var(--workspace-muted);
}

.dashboard-recent-when {
  color: var(--workspace-muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

.dashboard-chart-tip {
  position: fixed;
  z-index: 80;
  padding: 7px 11px;
  color: #fff;
  background: var(--workspace-navy);
  border-radius: 9px;
  box-shadow: var(--workspace-shadow-soft);
  font-size: 0.78rem;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .dashboard-chart-grid,
  .dashboard-chart-grid + .dashboard-chart-grid {
    grid-template-columns: 1fr;
  }
}
/* QERIONN_DASHBOARD_ANALYTICS_V1_END */