/* ==========================================================================
   ZeeqCRM UI — the single presentation layer for the redesign.
   Loaded AFTER the active theme stylesheet, so plain overrides win on order.

   Spec: .reqirement_documentation/05-design-system.md
   Stack: Bootstrap 4.5.3 + jQuery + C3/D3. No BS5-only class names.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Themes override this block only; no component rule below hard-codes a hex.
   -------------------------------------------------------------------------- */
:root {
  --zq-primary:        #FF5B2E;
  --zq-primary-soft:   #FFF1EC;
  --zq-primary-hover:  #E64A1E;
  --zq-primary-ink:    #FFFFFF;

  --zq-ink-900: #111827;
  --zq-ink-700: #374151;
  --zq-ink-500: #6B7280;
  --zq-ink-300: #9CA3AF;

  --zq-bg:        #F7F8FA;
  --zq-surface:   #FFFFFF;
  --zq-border:    #E7E9EE;
  --zq-header-bg: #F3F4F6;

  --zq-success: #16A34A;  --zq-success-soft: #E8F7EE;
  --zq-warning: #F59E0B;  --zq-warning-soft: #FEF6E7;
  --zq-danger:  #E5352B;  --zq-danger-soft:  #FDECEB;
  --zq-info:    #0EA5E9;  --zq-info-soft:    #E7F5FD;
  --zq-purple:  #8B5CF6;  --zq-purple-soft:  #F2EDFE;
  --zq-pink:    #EC4899;  --zq-pink-soft:    #FDEEF6;

  --zq-radius:    10px;
  --zq-radius-sm: 6px;
  --zq-shadow:    0 1px 2px rgba(17, 24, 39, .04), 0 2px 8px rgba(17, 24, 39, .05);
  --zq-shadow-hi: 0 2px 4px rgba(17, 24, 39, .06), 0 12px 24px rgba(17, 24, 39, .09);
  --zq-gutter:    24px;

  --zq-row-h:     64px;   /* comfortable; .zq-dense-compact swaps to 48px */
}

/* Row density preference (UI-8) */
.zq-density-compact { --zq-row-h: 48px; }

/* --------------------------------------------------------------------------
   2. Page shell
   -------------------------------------------------------------------------- */
.zq-page { padding: var(--zq-gutter); }

.zq-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.zq-page-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--zq-ink-900);
  margin: 0 0 6px;
}

.zq-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--zq-ink-500);
  margin: 0;
  padding: 0;
  list-style: none;
}
.zq-breadcrumb li { display: flex; align-items: center; gap: 6px; }
.zq-breadcrumb li + li::before { content: "\203A"; color: var(--zq-ink-300); }
.zq-breadcrumb a { color: var(--zq-ink-500); }
.zq-breadcrumb a:hover { color: var(--zq-primary); text-decoration: none; }
.zq-breadcrumb .zq-crumb-current { color: var(--zq-ink-900); font-weight: 500; }

.zq-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.zq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--zq-radius-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.zq-btn:focus-visible { outline: 2px solid var(--zq-primary); outline-offset: 2px; }

.zq-btn-primary { background: var(--zq-primary); border-color: var(--zq-primary); color: var(--zq-primary-ink); }
.zq-btn-primary:hover { background: var(--zq-primary-hover); border-color: var(--zq-primary-hover); color: var(--zq-primary-ink); text-decoration: none; }

.zq-btn-dark { background: var(--zq-ink-900); border-color: var(--zq-ink-900); color: #fff; }
.zq-btn-dark:hover { background: #000; color: #fff; text-decoration: none; }

.zq-btn-outline { background: var(--zq-surface); border-color: var(--zq-border); color: var(--zq-ink-700); }
.zq-btn-outline:hover { border-color: var(--zq-ink-300); color: var(--zq-ink-900); text-decoration: none; }

.zq-btn-icon { width: 40px; padding: 0; }

/* Segmented list/grid view toggle (FR-NAV-10) */
.zq-viewtoggle {
  display: inline-flex;
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius-sm);
  overflow: hidden;
}
.zq-viewtoggle > a,
.zq-viewtoggle > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--zq-ink-500);
}
.zq-viewtoggle > a:hover { color: var(--zq-ink-900); text-decoration: none; }
.zq-viewtoggle > .is-active { background: var(--zq-primary); color: var(--zq-primary-ink); }

/* --------------------------------------------------------------------------
   4. Card
   -------------------------------------------------------------------------- */
.zq-card {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius);
  box-shadow: var(--zq-shadow);
  margin-bottom: var(--zq-gutter);
}
.zq-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-bottom: 1px solid var(--zq-border);
}
.zq-card-head.is-flush { border-bottom: 0; }
.zq-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--zq-ink-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.zq-card-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zq-card-body { padding: 20px; }
.zq-card-body.is-flush { padding: 0; }

/* --------------------------------------------------------------------------
   5. Stat card (report band) — UI-6, one partial, four variants
   -------------------------------------------------------------------------- */
.zq-band { margin-bottom: var(--zq-gutter); }

.zq-stat {
  position: relative;
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius);
  box-shadow: var(--zq-shadow);
  padding: 18px 20px;
  height: 100%;
  overflow: hidden;
}
.zq-stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.zq-stat-label { font-size: 13px; color: var(--zq-ink-500); margin: 0 0 6px; }
.zq-stat-value { font-size: 24px; font-weight: 700; color: var(--zq-ink-900); line-height: 1.1; margin: 0; }
.zq-stat-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.zq-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--zq-ink-500);
}
.zq-stat-delta .zq-delta-up   { color: var(--zq-success); font-weight: 600; }
.zq-stat-delta .zq-delta-down { color: var(--zq-danger);  font-weight: 600; }

/* variant: bar */
.zq-stat-bar { height: 3px; border-radius: 3px; background: var(--zq-border); margin-top: 14px; overflow: hidden; }
.zq-stat-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--zq-primary); }

/* variant: rule — 3px colour down the left edge */
.zq-stat--rule { padding-left: 22px; }
.zq-stat--rule::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--zq-primary);
}

/* variant: sparkline */
.zq-stat-spark { height: 34px; margin: 10px -20px -18px -20px; }

/* Semantic tints reused by icons, rules and chips */
.zq-t-primary { background: var(--zq-primary-soft); color: var(--zq-primary); }
.zq-t-success { background: var(--zq-success-soft); color: var(--zq-success); }
.zq-t-warning { background: var(--zq-warning-soft); color: var(--zq-warning); }
.zq-t-danger  { background: var(--zq-danger-soft);  color: var(--zq-danger); }
.zq-t-info    { background: var(--zq-info-soft);    color: var(--zq-info); }
.zq-t-purple  { background: var(--zq-purple-soft);  color: var(--zq-purple); }
.zq-t-pink    { background: var(--zq-pink-soft);    color: var(--zq-pink); }

.zq-stat--rule.zq-r-primary::before { background: var(--zq-primary); }
.zq-stat--rule.zq-r-success::before { background: var(--zq-success); }
.zq-stat--rule.zq-r-warning::before { background: var(--zq-warning); }
.zq-stat--rule.zq-r-danger::before  { background: var(--zq-danger); }
.zq-stat--rule.zq-r-info::before    { background: var(--zq-info); }
.zq-stat--rule.zq-r-purple::before  { background: var(--zq-purple); }
.zq-stat--rule.zq-r-pink::before    { background: var(--zq-pink); }

/* --------------------------------------------------------------------------
   6. Filter bar — UI-4 / §5.4.7
   -------------------------------------------------------------------------- */
.zq-filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--zq-border);
}
.zq-filterbar-title { font-size: 16px; font-weight: 600; color: var(--zq-ink-900); margin: 0; }
.zq-filterbar-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.zq-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius-sm);
  font-size: 14px;
  color: var(--zq-ink-700);
  cursor: pointer;
  white-space: nowrap;
}
.zq-filter:hover { border-color: var(--zq-ink-300); color: var(--zq-ink-900); text-decoration: none; }
.zq-filter::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--zq-ink-500);
  border-bottom: 1.5px solid var(--zq-ink-500);
  transform: rotate(45deg) translateY(-2px);
}
.zq-filter.is-plain::after { display: none; }

/* Segmented priority filter (All / High / Medium / Low) */
.zq-segment {
  display: inline-flex;
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius-sm);
  padding: 3px;
  gap: 3px;
}
.zq-segment > a,
.zq-segment > button {
  border: 0;
  background: transparent;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 14px;
  color: var(--zq-ink-500);
  line-height: 1.2;
}
.zq-segment > a:hover { color: var(--zq-ink-900); text-decoration: none; }
.zq-segment > .is-active { background: var(--zq-primary); color: var(--zq-primary-ink); }

/* --------------------------------------------------------------------------
   7. Table — UI-7, the one table style
   -------------------------------------------------------------------------- */
.zq-table-wrap { width: 100%; overflow-x: auto; }

.zq-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.zq-table thead th {
  background: var(--zq-header-bg);
  color: var(--zq-ink-700);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--zq-border);
  white-space: nowrap;
}
.zq-table thead th:first-child { border-top-left-radius: 0; }
.zq-table tbody td {
  padding: 12px 16px;
  height: var(--zq-row-h);
  border-bottom: 1px solid var(--zq-border);
  color: var(--zq-ink-700);
  vertical-align: middle;
}
.zq-table tbody tr:hover td { background: var(--zq-bg); }
.zq-table tbody tr:last-child td { border-bottom: 0; }

.zq-table .zq-col-check { width: 44px; }
.zq-table .zq-col-actions { width: 96px; text-align: right; white-space: nowrap; }
.zq-table .zq-num { text-align: right; font-variant-numeric: tabular-nums; }

/* sortable header */
.zq-th-sort { cursor: pointer; }
.zq-th-sort > span { display: inline-flex; align-items: center; gap: 6px; }
.zq-sort-glyph {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  color: var(--zq-ink-300);
  line-height: 0;
}
.zq-sort-glyph i { font-size: 9px; }

/* identity cell */
.zq-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zq-identity img,
.zq-identity .zq-initials {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.zq-identity-text { min-width: 0; }
.zq-identity-name {
  display: block;
  font-weight: 600;
  color: var(--zq-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.zq-identity-name:hover { color: var(--zq-primary); text-decoration: none; }
.zq-identity-sub { display: block; font-size: 12px; color: var(--zq-ink-500); }

.zq-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zq-header-bg);
  color: var(--zq-ink-700);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--zq-radius-sm);
}

/* row action buttons */
.zq-rowact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--zq-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--zq-ink-500);
}
.zq-rowact:hover { background: var(--zq-bg); border-color: var(--zq-border); color: var(--zq-ink-900); text-decoration: none; }
.zq-rowact.is-danger:hover { color: var(--zq-danger); }

/* table footer */
.zq-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--zq-border);
  font-size: 13px;
  color: var(--zq-ink-500);
}
.zq-table-head-utils {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
}
.zq-perpage { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--zq-ink-700); }
.zq-search-inline {
  height: 40px;
  min-width: 220px;
  padding: 0 14px;
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius-sm);
  font-size: 14px;
  color: var(--zq-ink-700);
  background: var(--zq-surface);
}
.zq-search-inline::placeholder { color: var(--zq-ink-300); }

/* pagination */
.zq-pagination { display: flex; align-items: center; gap: 6px; }
.zq-pagination a,
.zq-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px; height: 32px;
  padding: 0 8px;
  border-radius: 50%;
  font-size: 13px;
  color: var(--zq-ink-700);
}
.zq-pagination a:hover { background: var(--zq-bg); text-decoration: none; }
.zq-pagination .is-active { background: var(--zq-primary); color: var(--zq-primary-ink); font-weight: 600; }
.zq-pagination .is-disabled { color: var(--zq-ink-300); pointer-events: none; }

/* --------------------------------------------------------------------------
   8. Badges — UI-9
   -------------------------------------------------------------------------- */
.zq-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.zq-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.zq-badge.is-plain::before { display: none; }

.zq-badge-success { background: var(--zq-success-soft); color: var(--zq-success); }
.zq-badge-info    { background: var(--zq-info-soft);    color: var(--zq-info); }
.zq-badge-warning { background: var(--zq-warning-soft); color: var(--zq-warning); }
.zq-badge-danger  { background: var(--zq-danger-soft);  color: var(--zq-danger); }
.zq-badge-purple  { background: var(--zq-purple-soft);  color: var(--zq-purple); }
.zq-badge-pink    { background: var(--zq-pink-soft);    color: var(--zq-pink); }
.zq-badge-muted   { background: var(--zq-header-bg);    color: var(--zq-ink-500); }

/* priority: dot + label, optionally an inline select */
.zq-priority { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--zq-ink-700); }
.zq-priority-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.zq-priority-high   .zq-priority-dot { background: var(--zq-danger); }
.zq-priority-medium .zq-priority-dot { background: var(--zq-warning); }
.zq-priority-low    .zq-priority-dot { background: var(--zq-success); }

.zq-priority-select {
  height: 38px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius-sm);
  background: var(--zq-surface);
  font-size: 14px;
  color: var(--zq-ink-700);
}

/* --------------------------------------------------------------------------
   9. Avatar group — §5.4.5
   -------------------------------------------------------------------------- */
.zq-avatars { display: inline-flex; align-items: center; }
.zq-avatars img,
.zq-avatars .zq-avatar-more {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--zq-surface);
  object-fit: cover;
}
.zq-avatars > * + * { margin-left: -8px; }
.zq-avatar-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zq-primary);
  color: var(--zq-primary-ink);
  font-size: 11px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   10. Progress — §5.4.6
   -------------------------------------------------------------------------- */
.zq-progress { display: flex; align-items: center; gap: 10px; }
.zq-progress-track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 4px;
  background: var(--zq-border);
  overflow: hidden;
  min-width: 60px;
}
.zq-progress-track > span { display: block; height: 100%; border-radius: 4px; background: var(--zq-info); }
.zq-progress-value { font-size: 13px; font-weight: 600; color: var(--zq-ink-700); flex: 0 0 auto; }

.zq-progress--critical .zq-progress-track > span { background: var(--zq-danger); }
.zq-progress--low      .zq-progress-track > span { background: var(--zq-warning); }
.zq-progress--mid      .zq-progress-track > span { background: var(--zq-info); }
.zq-progress--high     .zq-progress-track > span { background: var(--zq-success); }

/* --------------------------------------------------------------------------
   11. Grid card — §5.4.10
   -------------------------------------------------------------------------- */
.zq-gridcard {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius);
  box-shadow: var(--zq-shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.zq-gridcard:hover { box-shadow: var(--zq-shadow-hi); border-color: var(--zq-ink-300); }
.zq-gridcard-body { padding: 18px 20px; flex: 1 1 auto; }
.zq-gridcard-foot { padding: 14px 20px; border-top: 1px solid var(--zq-border); }
.zq-gridcard-divider { border-top: 1px solid var(--zq-border); margin: 14px 0; }
.zq-gridcard-title { font-size: 15px; font-weight: 600; color: var(--zq-ink-900); margin: 0; }
a.zq-gridcard-title:hover { color: var(--zq-primary); text-decoration: none; }
.zq-gridcard-desc {
  font-size: 13px;
  color: var(--zq-ink-500);
  margin: 10px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zq-gridcard-rule { height: 3px; border-radius: var(--zq-radius) var(--zq-radius) 0 0; }

/* --------------------------------------------------------------------------
   12. Kanban — §5.4.8
   -------------------------------------------------------------------------- */
.zq-board {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
}
.zq-board-col { flex: 0 0 320px; max-width: 320px; }
.zq-board-colhead {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius);
  box-shadow: var(--zq-shadow);
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.zq-board-colname {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--zq-ink-900);
  margin: 0;
}
.zq-board-colname .zq-dot { width: 8px; height: 8px; border-radius: 50%; }
.zq-board-colmeta { font-size: 13px; color: var(--zq-ink-500); margin: 6px 0 0; }
.zq-board-colacts { display: flex; gap: 4px; }
.zq-board-body { display: flex; flex-direction: column; gap: 14px; min-height: 60px; }

.zq-board-card {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius);
  box-shadow: var(--zq-shadow);
  overflow: hidden;
}
.zq-board-card .zq-gridcard-rule { border-radius: 0; }
.zq-board-card-body { padding: 16px 18px; }
.zq-board-card.zq-drag-ghost { opacity: .4; }
.zq-board-drop { outline: 2px dashed var(--zq-primary); outline-offset: 4px; border-radius: var(--zq-radius); }

/* terminal stages (FR-PIPE-5) */
.zq-board-col--won  .zq-board-colhead { border-color: var(--zq-success); }
.zq-board-col--lost .zq-board-colhead { border-color: var(--zq-danger); }

/* --------------------------------------------------------------------------
   13. Detail page — §5.4.9
   -------------------------------------------------------------------------- */
.zq-detail-rail {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius);
  box-shadow: var(--zq-shadow);
  overflow: hidden;
}
.zq-detail-cover { height: 96px; background: linear-gradient(120deg, var(--zq-primary), #FFA24D); }
.zq-detail-id {
  margin-top: -48px;
  text-align: center;
  padding: 0 20px 20px;
}
.zq-detail-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 4px solid var(--zq-surface);
  object-fit: cover;
  background: var(--zq-header-bg);
}
.zq-detail-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--zq-ink-900);
  margin: 12px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.zq-detail-sub { font-size: 14px; color: var(--zq-ink-500); margin: 0 0 10px; }
.zq-detail-actions { display: flex; gap: 10px; padding: 0 20px 20px; }
.zq-detail-actions > * { flex: 1 1 0; }

.zq-panel { border-top: 1px solid var(--zq-border); padding: 18px 20px; }
.zq-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.zq-panel-title { font-size: 15px; font-weight: 600; color: var(--zq-ink-900); margin: 0; }
.zq-panel-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  font-size: 14px;
}
.zq-panel-key { color: var(--zq-ink-500); display: flex; align-items: center; gap: 8px; }
.zq-panel-val { color: var(--zq-ink-900); text-align: right; }

/* tab strip — UI-10 */
.zq-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--zq-border);
  background: var(--zq-surface);
  border-radius: var(--zq-radius) var(--zq-radius) 0 0;
  padding: 0 8px;
}
/* anchors may sit directly in the strip, or inside <li> when the markup needs
   role="tablist"/role="presentation" for assistive technology — both style the
   same, so a page can pick the markup its accessibility needs call for */
.zq-tabs > li { display: inline-flex; list-style: none; }
.zq-tabs > a,
.zq-tabs > li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--zq-ink-500);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.zq-tabs > a:hover,
.zq-tabs > li > a:hover { color: var(--zq-ink-900); text-decoration: none; }
.zq-tabs > a.is-active,
.zq-tabs > li > a.is-active { color: var(--zq-primary); border-bottom-color: var(--zq-primary); }

/* --------------------------------------------------------------------------
   14. Charts
   -------------------------------------------------------------------------- */
.zq-chart { width: 100%; min-height: 220px; }
.zq-chart-legend { display: flex; flex-direction: column; gap: 14px; }
.zq-legend-item { display: flex; align-items: flex-start; gap: 10px; }
.zq-legend-swatch { width: 4px; align-self: stretch; min-height: 32px; border-radius: 2px; flex: 0 0 auto; }
.zq-legend-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.zq-legend-label { font-size: 13px; color: var(--zq-ink-500); }
.zq-legend-value { font-size: 16px; font-weight: 700; color: var(--zq-ink-900); }

/* centre label for donut/gauge */
.zq-donut-wrap { position: relative; }
.zq-donut-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.zq-donut-centre .zq-dc-value { font-size: 22px; font-weight: 700; color: var(--zq-ink-900); }
.zq-donut-centre .zq-dc-label { font-size: 12px; color: var(--zq-ink-500); }

/* C3 chrome reset so charts inherit our type scale */
.c3 svg { font-family: inherit; }
.c3-axis path, .c3-axis line { stroke: var(--zq-border); }
.c3-axis text { fill: var(--zq-ink-500); font-size: 12px; }
.c3-grid line { stroke: var(--zq-border); stroke-dasharray: 0; }
.c3-legend-item text { fill: var(--zq-ink-500); font-size: 12px; }
.c3-tooltip-container { box-shadow: var(--zq-shadow-hi); border-radius: var(--zq-radius-sm); }

/* --------------------------------------------------------------------------
   15. Empty & loading — UI-13 / UI-14
   -------------------------------------------------------------------------- */
.zq-empty { text-align: center; padding: 56px 24px; }
.zq-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zq-bg);
  color: var(--zq-ink-300);
  font-size: 28px;
}
.zq-empty-title { font-size: 16px; font-weight: 600; color: var(--zq-ink-900); margin: 0 0 6px; }
.zq-empty-text { font-size: 14px; color: var(--zq-ink-500); margin: 0 0 18px; }

.zq-skeleton {
  background: linear-gradient(90deg, var(--zq-header-bg) 25%, var(--zq-bg) 37%, var(--zq-header-bg) 63%);
  background-size: 400% 100%;
  animation: zq-shimmer 1.3s ease infinite;
  border-radius: var(--zq-radius-sm);
}
.zq-skeleton-line { height: 12px; margin: 10px 0; }
@keyframes zq-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .zq-skeleton { animation: none; } }

/* --------------------------------------------------------------------------
   16. Sidebar — §5.6
   -------------------------------------------------------------------------- */
.zq-nav-caption {
  padding: 18px 20px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--zq-ink-300);
}
.left-sidebar .sidenav-menu-item > a { border-radius: var(--zq-radius); }

/* --------------------------------------------------------------------------
   17. Responsive — §5.8, UI-15
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .zq-board-col { flex-basis: 288px; max-width: 288px; }
}

@media (max-width: 991.98px) {
  :root { --zq-gutter: 16px; }
  .zq-page-head { flex-direction: column; align-items: stretch; }
  .zq-page-actions { justify-content: flex-start; }
}

@media (max-width: 767.98px) {
  .zq-filterbar { flex-direction: column; align-items: stretch; }
  .zq-filterbar-controls > * { flex: 1 1 auto; }
  .zq-search-inline { width: 100%; min-width: 0; }

  /* Stacked definition cards instead of a horizontally scrolling table */
  .zq-table-wrap { overflow-x: visible; }
  .zq-table, .zq-table tbody, .zq-table tr, .zq-table td { display: block; width: 100%; }
  .zq-table thead { display: none; }
  .zq-table tbody tr {
    background: var(--zq-surface);
    border: 1px solid var(--zq-border);
    border-radius: var(--zq-radius);
    margin-bottom: 12px;
    padding: 6px 4px;
  }
  .zq-table tbody td {
    height: auto;
    border-bottom: 1px solid var(--zq-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
  }
  .zq-table tbody td:last-child { border-bottom: 0; }
  .zq-table tbody td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: var(--zq-ink-500);
    flex: 0 0 auto;
  }
  .zq-table tbody td:not([data-label])::before { content: none; }
  .zq-table .zq-col-actions { justify-content: flex-end; }
  .zq-table .zq-num { text-align: left; }
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.zq-muted { color: var(--zq-ink-500); }
.zq-strong { color: var(--zq-ink-900); font-weight: 600; }
.zq-nowrap { white-space: nowrap; }
.zq-link { color: var(--zq-ink-700); }
.zq-link:hover { color: var(--zq-primary); text-decoration: none; }
.zq-hr { border: 0; border-top: 1px solid var(--zq-border); margin: 16px 0; }

/* Focus visibility — UI-20 */
.zq-card a:focus-visible,
.zq-table a:focus-visible,
.zq-filter:focus-visible,
.zq-rowact:focus-visible,
.zq-tabs > a:focus-visible {
  outline: 2px solid var(--zq-primary);
  outline-offset: 2px;
  border-radius: var(--zq-radius-sm);
}

/* ==========================================================================
   19. Legacy list tables
   --------------------------------------------------------------------------
   "Redesign all the tables with the new table design."

   Every list page in the app renders the same markup:

       .table-responsive.list-table-wrapper > table.table.table-hover.contact-list

   so mapping that one selector onto the tokens above restyles ~40 tables at
   once, without touching a single Blade view. The tables keep their existing
   sorting links, per-column config, bulk actions and ajax behaviour — this is
   presentation only.

   Pages rebuilt on .zq-table (Activities, Deals, dashboards) are unaffected;
   the two styles are deliberately identical so the app reads as one system.
   ========================================================================== */

.list-table-wrapper > table.table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  color: var(--zq-ink-700);
}

/* --- head ---------------------------------------------------------------- */
.list-table-wrapper > table.table > thead > tr > th {
  background: var(--zq-header-bg);
  color: var(--zq-ink-700);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--zq-border);
  vertical-align: middle;
  white-space: nowrap;
}
.list-table-wrapper > table.table > thead > tr > th:first-child {
  border-top-left-radius: var(--zq-radius);
}
.list-table-wrapper > table.table > thead > tr > th:last-child {
  border-top-right-radius: var(--zq-radius);
}

/* the sort link should read as the column label, not as a link */
.list-table-wrapper > table.table > thead > tr > th > a,
.list-table-wrapper > table.table > thead > tr > th > a:hover {
  color: var(--zq-ink-700);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.list-table-wrapper > table.table > thead > tr > th > a:hover { color: var(--zq-ink-900); }
.list-table-wrapper .sorting-icons { color: var(--zq-ink-300); font-size: 11px; line-height: 1; }
.list-table-wrapper > table.table > thead > tr > th > a:hover .sorting-icons { color: var(--zq-ink-500); }

/* --- body ---------------------------------------------------------------- */
.list-table-wrapper > table.table > tbody > tr > td {
  padding: 12px 16px;
  height: var(--zq-row-h);
  border: 0;
  border-bottom: 1px solid var(--zq-border);
  vertical-align: middle;
  color: var(--zq-ink-700);
}
.list-table-wrapper > table.table > tbody > tr:last-child > td { border-bottom: 0; }
.list-table-wrapper > table.table.table-hover > tbody > tr:hover > td { background: var(--zq-bg); }

/* primary link in a row reads as the record name */
.list-table-wrapper > table.table > tbody > tr > td a:not(.btn):not(.dropdown-item) {
  color: var(--zq-ink-900);
  font-weight: 500;
}
.list-table-wrapper > table.table > tbody > tr > td a:not(.btn):not(.dropdown-item):hover {
  color: var(--zq-primary);
  text-decoration: none;
}

/* thumbnails become the identity avatar */
.list-table-wrapper .lists-table-thumb,
.list-table-wrapper .list-table-thumb img,
.list-table-wrapper td img.rounded-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

/* row action icons */
.list-table-wrapper .list-table-action > a,
.list-table-wrapper .list-table-action > button,
.list-table-wrapper .table-icons > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--zq-radius-sm);
  color: var(--zq-ink-500);
  border: 1px solid transparent;
  background: transparent;
}
.list-table-wrapper .list-table-action > a:hover,
.list-table-wrapper .list-table-action > button:hover,
.list-table-wrapper .table-icons > a:hover {
  background: var(--zq-bg);
  border-color: var(--zq-border);
  color: var(--zq-ink-900);
  text-decoration: none;
}

/* --- the card the table sits in ------------------------------------------ */
#clients-table-wrapper.card,
[id$="-table-wrapper"].card {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius);
  box-shadow: var(--zq-shadow);
}
[id$="-table-wrapper"].card > .card-body { padding: 0; }
[id$="-table-wrapper"].card > .card-body > .list-table-wrapper { border-radius: var(--zq-radius); }

/* the app's own status pills adopt the badge vocabulary */
.list-table-wrapper .badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* pagination under a legacy table */
.list-table-wrapper + .pagination-wrapper .pagination > li > a,
.pagination-wrapper .pagination > li > span {
  border: 0;
  border-radius: 50%;
  color: var(--zq-ink-700);
  min-width: 32px;
  text-align: center;
}
.pagination-wrapper .pagination > .active > a,
.pagination-wrapper .pagination > .active > span {
  background: var(--zq-primary);
  color: var(--zq-primary-ink);
}

/* --- responsive: stacked cards under 768px, as UI-15 requires ------------ */
@media (max-width: 767.98px) {
  .list-table-wrapper { overflow-x: auto; }
  .list-table-wrapper > table.table > tbody > tr > td { height: auto; }
}

/* --------------------------------------------------------------------------
   20. View toggle inside a legacy list-page action bar
   -------------------------------------------------------------------------- */
/*
   The legacy toolbars (#list-page-actions) lay their controls out inline with
   `text-align: right`, so the toggle has to sit on the text baseline with the
   buttons around it rather than as a block of its own.
*/
#list-page-actions .zq-viewtoggle {
  vertical-align: middle;
  margin: 0 4px;
  height: 36px;
}
#list-page-actions .zq-viewtoggle > a {
  width: 36px;
  height: 34px;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   21. Grid card identity — §5.4.10 / FR-CLI-2, FR-CON-2
   -------------------------------------------------------------------------- */
/* the large centred avatar with a presence dot, used by the client and
   contact grid cards */
.zq-avatar-xl-wrap { position: relative; display: inline-block; }
.zq-avatar-xl {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--zq-header-bg);
  border: 3px solid var(--zq-surface);
  box-shadow: var(--zq-shadow);
}
.zq-presence {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--zq-surface);
  background: var(--zq-ink-300);
}
.zq-presence.is-active { background: var(--zq-success); }

/* small rounded label under a name — a role, a category, a job title */
.zq-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--zq-primary-soft);
  color: var(--zq-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   22. Solid button contrast — UI-17
   --------------------------------------------------------------------------
   Three of the six themes set `html.<theme> a { color: <theme colour>; }`.
   That selector scores (0,1,2) on specificity, which beats Bootstrap's
   `.btn-danger { color: #fff }` at (0,1,0). So every solid button rendered as
   an <a> — Delete, and the red action buttons in table rows — drew theme-green
   text on a red fill, which is close to unreadable.

   Fixed here rather than in each theme: this file loads after the theme, the
   selectors below carry a class more than the theme's, and stating it once
   means a seventh theme cannot reintroduce the bug.

   Label colour is a legibility guarantee, not decoration, so !important is
   warranted: a solid fill must always carry its contrasting label.
   -------------------------------------------------------------------------- */
a.btn-danger,  a.btn-danger:hover,  a.btn-danger:focus,  a.btn-danger:active,
a.btn-primary, a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active,
a.btn-success, a.btn-success:hover, a.btn-success:focus, a.btn-success:active,
a.btn-info,    a.btn-info:hover,    a.btn-info:focus,    a.btn-info:active,
a.btn-dark,    a.btn-dark:hover,    a.btn-dark:focus,    a.btn-dark:active,
a.btn-secondary, a.btn-secondary:hover, a.btn-secondary:focus, a.btn-secondary:active {
  color: #fff !important;
}

/* warning is a light fill, so it takes dark ink rather than white */
a.btn-warning, a.btn-warning:hover, a.btn-warning:focus, a.btn-warning:active {
  color: var(--zq-ink-900) !important;
}

/* the same guarantee for the design-system buttons, and for an icon inside one */
a.zq-btn-primary, a.zq-btn-primary:hover, a.zq-btn-primary:focus,
a.zq-btn-danger,  a.zq-btn-danger:hover,  a.zq-btn-danger:focus {
  color: var(--zq-primary-ink, #fff) !important;
}
.btn-danger > i, .btn-primary > i, .btn-success > i,
.btn-info > i, .btn-dark > i, .btn-secondary > i { color: inherit; }

/* --------------------------------------------------------------------------
   23. Stepper + callout — FR-HR-4
   --------------------------------------------------------------------------
   A lifecycle that exists in the service layer but not on screen leaves the
   user guessing what happens next. The stepper renders where a record is and
   what is still ahead; the callout carries the exceptions (a rejected payroll
   run, an overdue invoice) that the line itself cannot express.
   -------------------------------------------------------------------------- */
.zq-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: zq-step;
}
/* The dot sits above its label rather than beside it. Side-by-side put the
   connector line at the same height as the text, so it struck through every
   label it passed. */
.zq-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 0;
  min-width: 130px;
  position: relative;
  padding: 4px 12px 4px 0;
}
/* the connector, running between this dot and the next, at the dots' centre */
.zq-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 4px;
  top: 19px;
  height: 2px;
  background: var(--zq-border);
}
.zq-step.is-done:not(:last-child)::after { background: var(--zq-success); }

.zq-step-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--zq-surface);
  border: 2px solid var(--zq-border);
  color: var(--zq-ink-300);
}
.zq-step.is-done .zq-step-dot {
  background: var(--zq-success);
  border-color: var(--zq-success);
  color: #fff;
}
.zq-step.is-current .zq-step-dot {
  background: var(--zq-primary);
  border-color: var(--zq-primary);
  color: var(--zq-primary-ink);
  box-shadow: 0 0 0 4px var(--zq-primary-soft);
}
.zq-step-text { display: flex; flex-direction: column; min-width: 0; padding-right: 8px; }
.zq-step-label { font-size: 13px; font-weight: 600; color: var(--zq-ink-300); }
.zq-step.is-done .zq-step-label { color: var(--zq-ink-700); }
.zq-step.is-current .zq-step-label { color: var(--zq-ink-900); }
.zq-step-hint { font-size: 12px; color: var(--zq-ink-500); margin-top: 2px; }

@media (max-width: 767.98px) {
  .zq-stepper { flex-direction: column; }
  .zq-step { flex: 1 1 auto; }
  .zq-step:not(:last-child)::after { display: none; }
}

/* callout — an inline message tied to the record, not a page-level alert */
.zq-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--zq-radius-sm);
  border: 1px solid var(--zq-border);
  background: var(--zq-bg);
  font-size: 13px;
  color: var(--zq-ink-700);
  margin-bottom: 16px;
}
.zq-callout > i { font-size: 15px; line-height: 1.5; }
.zq-callout--warning { background: var(--zq-warning-soft); border-color: var(--zq-warning); }
.zq-callout--warning > i { color: var(--zq-warning); }
.zq-callout--danger  { background: var(--zq-danger-soft);  border-color: var(--zq-danger); }
.zq-callout--danger > i  { color: var(--zq-danger); }
.zq-callout--success { background: var(--zq-success-soft); border-color: var(--zq-success); }
.zq-callout--success > i { color: var(--zq-success); }
.zq-callout--info    { background: var(--zq-info-soft);    border-color: var(--zq-info); }
.zq-callout--info > i    { color: var(--zq-info); }

/* stat-card caption slot — a figure that needs qualifying rather than trending */
.zq-stat-sub { font-size: 12px; color: var(--zq-ink-500); margin: 6px 0 0; }

/* --------------------------------------------------------------------------
   24. Action queue — FR-HR-2
   --------------------------------------------------------------------------
   "What needs me right now": a count, what it is, and a link straight to it.
   A dashboard that only reports totals cannot be acted on.
   -------------------------------------------------------------------------- */
.zq-actionqueue {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--zq-radius);
  border: 1px solid var(--zq-border);
  background: var(--zq-surface);
  height: 100%;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.zq-actionqueue:hover { text-decoration: none; box-shadow: var(--zq-shadow-hi); }
.zq-actionqueue-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.zq-actionqueue-text { display: flex; flex-direction: column; min-width: 0; }
.zq-actionqueue-count { font-size: 20px; font-weight: 700; color: var(--zq-ink-900); line-height: 1.2; }
.zq-actionqueue-label { font-size: 12px; color: var(--zq-ink-500); }

.zq-actionqueue--warning { border-left: 3px solid var(--zq-warning); }
.zq-actionqueue--warning .zq-actionqueue-icon { background: var(--zq-warning-soft); color: var(--zq-warning); }
.zq-actionqueue--danger  { border-left: 3px solid var(--zq-danger); }
.zq-actionqueue--danger .zq-actionqueue-icon  { background: var(--zq-danger-soft);  color: var(--zq-danger); }
.zq-actionqueue--info    { border-left: 3px solid var(--zq-info); }
.zq-actionqueue--info .zq-actionqueue-icon    { background: var(--zq-info-soft);    color: var(--zq-info); }
.zq-actionqueue--purple  { border-left: 3px solid var(--zq-purple); }
.zq-actionqueue--purple .zq-actionqueue-icon  { background: var(--zq-purple-soft);  color: var(--zq-purple); }
.zq-actionqueue--success { border-left: 3px solid var(--zq-success); }
.zq-actionqueue--success .zq-actionqueue-icon { background: var(--zq-success-soft); color: var(--zq-success); }

/* simple key/value legend beside a donut */
ul.zq-legend { list-style: none; margin: 12px 0 0; padding: 0; }
ul.zq-legend > li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--zq-border); font-size: 13px;
}
ul.zq-legend > li:last-child { border-bottom: 0; }
ul.zq-legend .zq-legend-value { font-weight: 600; color: var(--zq-ink-900); }

/* a caption inside a collapsed sidebar submenu, to group a long child list */
.sidenav-submenu-caption {
  list-style: none;
  padding: 10px 14px 4px 30px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zq-ink-300);
}

/* form label, for the inline forms that belong on a page rather than in a modal */
.zq-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--zq-ink-700);
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Stat card in a narrow column
   --------------------------------------------------------------------------
   Six stat cards across (col-xl-2) leaves each one narrow enough that a long
   currency value pushed the icon out past the card edge. The value is allowed
   to shrink and wrap; the icon never is.
   -------------------------------------------------------------------------- */
.zq-stat-top { gap: 10px; }
.zq-stat-top > div:first-child { min-width: 0; flex: 1 1 auto; }
.zq-stat-icon { flex: 0 0 auto; }
/* A currency figure must never break across lines - "60,232,5 / 00.00" is worse
   than a clipped icon. It shrinks instead, and truncates only as a last resort. */
.zq-stat-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------------------
   25. Invoice / estimate document — FR-BILL-3
   --------------------------------------------------------------------------
   Reference: smarthr "invoice-details".

   This restyles the existing bill markup rather than replacing it. The same
   template is the live invoice *editor* (config('visibility.bill_mode') is
   'editing' or 'viewing'), and every inline-edit handler is bound to the
   markup as it stands — so the document is redesigned by mapping what is
   already there onto the reference layout, and the editor keeps working.
   -------------------------------------------------------------------------- */
#invoice-wrapper.invoice-wrapper {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: var(--zq-radius);
  box-shadow: var(--zq-shadow);
  padding: 32px 36px;
}

/* the company block reads as the issuer, not as a heading */
#invoice-wrapper .x-company-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--zq-ink-900) !important;
  margin-bottom: 6px;
}
#invoice-wrapper address { font-style: normal; margin-bottom: 0; }
#invoice-wrapper address h3,
#invoice-wrapper address h4 { font-size: 15px; font-weight: 600; color: var(--zq-ink-900); }
#invoice-wrapper address p { font-size: 13px; color: var(--zq-ink-500); line-height: 1.7; }

/* From / To sit as two panels on one rule, as in the reference */
#invoice-wrapper .billing-mode-only-item > .pull-left,
#invoice-wrapper .billing-mode-only-item > .pull-right {
  padding: 20px 0;
}
#invoice-wrapper hr { border-top: 1px solid var(--zq-border); margin: 20px 0; }

#invoice-wrapper .invoice-project-title {
  font-size: 13px;
  color: var(--zq-ink-700);
  padding: 12px 0;
  border-top: 1px solid var(--zq-border);
}

/* the line-item table */
#invoice-wrapper .invoice-table > thead > tr > th {
  background: var(--zq-header-bg);
  color: var(--zq-ink-700);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  border: 0;
  padding: 14px 12px;
  white-space: nowrap;
}
#invoice-wrapper .invoice-table > thead > tr > th:first-child { border-radius: var(--zq-radius-sm) 0 0 var(--zq-radius-sm); }
#invoice-wrapper .invoice-table > thead > tr > th:last-child  { border-radius: 0 var(--zq-radius-sm) var(--zq-radius-sm) 0; }
#invoice-wrapper .invoice-table > tbody > tr > td {
  border-top: 0;
  border-bottom: 1px solid var(--zq-border);
  padding: 16px 12px;
  font-size: 14px;
  color: var(--zq-ink-700);
  vertical-align: middle;
}
#invoice-wrapper .invoice-table > tbody > tr > td:first-child { color: var(--zq-ink-900); font-weight: 600; }

/* totals block, right aligned under the table */
#invoice-wrapper .invoice-totals-wrapper,
#invoice-wrapper #invoice-totals-container { font-size: 14px; }
#invoice-wrapper .invoice-totals-wrapper .grand-total,
#invoice-wrapper #invoice-totals-container .grand-total {
  font-size: 18px;
  font-weight: 700;
  color: var(--zq-ink-900);
  border-top: 2px solid var(--zq-border);
  padding-top: 12px;
}

/* terms and notes read as small print, not as body copy */
#invoice-wrapper #invoice-terms,
#invoice-wrapper #invoice-notes {
  font-size: 13px;
  color: var(--zq-ink-500);
  line-height: 1.7;
}
#invoice-wrapper h4 { font-size: 14px; font-weight: 600; color: var(--zq-ink-900); }

/* the document footer: how to pay */
.zq-invoice-payfooter {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--zq-border);
  text-align: center;
  font-size: 13px;
  color: var(--zq-ink-500);
}
.zq-invoice-payfooter .zq-invoice-bank { margin-top: 6px; }
.zq-invoice-payfooter .zq-invoice-bank span { margin: 0 10px; }
.zq-invoice-payfooter strong { color: var(--zq-ink-900); }

/* amount in words, under the total */
.zq-amount-words { font-size: 12px; color: var(--zq-ink-500); margin-top: 6px; }

@media print {
  #invoice-wrapper.invoice-wrapper { border: 0; box-shadow: none; padding: 0; }
}

/* --------------------------------------------------------------------------
   Invoice status, as a badge rather than a headline
   --------------------------------------------------------------------------
   The status renders as an <h1> in the existing markup, and `js-invoice-statuses`
   is bound by the invoice javascript, so it is restyled rather than rewritten.
   -------------------------------------------------------------------------- */
#invoice-wrapper .js-invoice-statuses h1 {
  display: inline-block;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 8px;
  background: var(--zq-header-bg);
  border: 1px solid var(--zq-border);
}
#invoice-wrapper .js-invoice-statuses h1.text-success { background: var(--zq-success-soft); border-color: var(--zq-success); }
#invoice-wrapper .js-invoice-statuses h1.text-danger  { background: var(--zq-danger-soft);  border-color: var(--zq-danger); }
#invoice-wrapper .js-invoice-statuses h1.text-warning { background: var(--zq-warning-soft); border-color: var(--zq-warning); }
#invoice-wrapper .js-invoice-statuses h1.text-info    { background: var(--zq-info-soft);    border-color: var(--zq-info); }

/* --------------------------------------------------------------------------
   26. Sidebar stability — FR-UI-21
   --------------------------------------------------------------------------
   The sidebar is position:fixed, but its scroll container inherited a
   percentage height and let wheel events fall through to the page, so scrolling
   over the menu moved the page underneath it. Pinning the container to the
   viewport and containing overscroll keeps the menu still.
   -------------------------------------------------------------------------- */
.fix-sidebar .left-sidebar {
  top: 0;
  bottom: 0;
  height: 100vh;
}
.left-sidebar .scroll-sidebar {
  height: 100%;
  overflow-y: auto;
  /* stop a wheel event that reaches the end of the menu from scrolling the page */
  overscroll-behavior: contain;
  /* the sidebar must not shift horizontally when its scrollbar appears */
  scrollbar-gutter: stable;
}

/* the active item has to be visible without hunting for it */
.sidebar-nav .sidenav-menu-item.active > a,
.sidebar-nav > ul > li.active > a {
  font-weight: 600;
}
.sidebar-nav .sidenav-submenu.active > a {
  font-weight: 600;
}
/* keep an open submenu open while its parent is the active page */
.sidebar-nav .sidenav-menu-item.active > ul.collapse { display: block; }