/* ==============================================================
   Clausal — shared shell styles
   Used by app.js to render sidebar + user menu + toasts on every
   screen. Designed to coexist with the inline styles in each page.
   ============================================================== */

/* ------------------- APP SHELL LAYOUT
   .app = left navigation (full height) + global header + page content.
   body .app raises specificity over each page's own .app rule. */
body .app{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
body .app>.cl-side{grid-column:1;grid-row:1/-1;position:sticky;top:0;height:100vh;align-self:start;z-index:var(--z-sticky)}
body .app>:not(.cl-side){grid-column:2;grid-row:1;min-width:0;min-height:0}

/* ------------------- LEFT NAVIGATION */
.cl-side{width:64px;background:oklch(98% 0.005 240);border-right:1px solid var(--c-border);display:flex;flex-direction:column;align-items:center;padding:8px 0;overflow-y:auto}
.cl-side__brand{width:32px;height:32px;flex:none;margin:0 0 12px;background:url('assets/clausal-icon.svg') center/contain no-repeat}
.cl-side__nav{display:flex;flex-direction:column;align-items:center;gap:2px}
.cl-side__item{width:56px;min-height:48px;padding:6px 2px;border-radius:var(--r-6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--c-text-3);position:relative;text-decoration:none;text-align:center}
.cl-side__item:hover{background:var(--c-surface-3);color:var(--c-text);text-decoration:none}
.cl-side__item.is-active{background:var(--c-primary-50);color:var(--c-primary-700)}
.cl-side__item.is-active::before{content:"";position:absolute;left:-4px;top:10px;bottom:10px;width:2px;background:var(--c-primary-600);border-radius:0 2px 2px 0}
.cl-side__item.is-disabled{color:var(--c-text-4);cursor:default;pointer-events:none}
.cl-side__icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex:none}
.cl-side__label{font-size:9.5px;font-weight:var(--fw-medium);line-height:1.15;letter-spacing:.01em;max-width:52px}
.cl-side__count{position:absolute;top:3px;right:5px;min-width:16px;height:14px;padding:0 4px;background:var(--c-primary-600);color:#fff;font-size:9px;font-weight:var(--fw-semibold);border-radius:7px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.cl-side__divider{width:32px;height:1px;background:var(--c-border-strong);margin:6px 0}

/* ------------------- GLOBAL HEADER */
.cl-user-wrap{position:relative;display:inline-flex}
.cl-user-pop--header{left:auto!important;right:0!important;bottom:auto!important;top:calc(100% + 8px)!important;display:none}
.cl-user-wrap.is-open .cl-user-pop--header{display:block}

/* ------------------- USER POPOVER */
.cl-user-pop {
  display: none;
  position: absolute;
  left: calc(100% + 8px);
  bottom: 4px;
  width: 220px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-8);
  box-shadow: var(--sh-lg);
  padding: 4px;
  z-index: 100;
  animation: cl-pop-in 120ms var(--ease-out);
}
.cl-side__user.is-open .cl-user-pop { display: block; }

@keyframes cl-pop-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cl-user-pop__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 8px;
  border-bottom: 1px solid var(--c-divider);
  margin-bottom: 4px;
}
.cl-user-pop__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: oklch(70% 0.10 30); color: #fff;
  font-size: 12px; font-weight: var(--fw-semibold);
  display: flex; align-items: center; justify-content: center;
}
.cl-user-pop__name { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--c-text); }
.cl-user-pop__role { font-size: 11px; color: var(--c-text-3); }

.cl-user-pop__item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  font-size: var(--fs-13);
  color: var(--c-text);
  border-radius: var(--r-4);
  text-decoration: none;
  cursor: pointer;
}
.cl-user-pop__item:hover { background: var(--c-surface-3); }
.cl-user-pop__item--danger { color: var(--c-danger-700); }
.cl-user-pop__item--danger svg { color: var(--c-danger-700); }
.cl-user-pop__item svg { color: var(--c-text-3); flex: none; }

.cl-user-pop__sep { height: 1px; background: var(--c-divider); margin: 4px 0; }

/* ------------------- TOAST */
.cl-toast-host {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.cl-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--c-text);
  color: oklch(98% 0.003 240);
  font-size: var(--fs-13); font-weight: var(--fw-medium);
  border-radius: var(--r-6);
  box-shadow: var(--sh-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  pointer-events: auto;
  min-width: 240px;
}
.cl-toast.is-in { opacity: 1; transform: translateY(0); }
.cl-toast__icon {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--fw-bold);
  background: var(--c-success-500); color: #fff;
  flex: none;
}
.cl-toast--warn .cl-toast__icon { background: var(--c-warning-500); color: oklch(20% 0.02 80); }
.cl-toast--info .cl-toast__icon { background: var(--c-info-500); color: #fff; }

/* ------------------- MODAL */
.cl-modal-host {
  position: fixed; inset: 0;
  background: var(--c-overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
  animation: cl-fade-in 160ms var(--ease-out);
}
@keyframes cl-fade-in { from { opacity: 0 } to { opacity: 1 } }
.cl-modal {
  background: var(--c-surface);
  border-radius: var(--r-12);
  box-shadow: var(--sh-lg);
  width: 480px;
  max-width: calc(100vw - 48px);
  animation: cl-pop-in 200ms var(--ease-out);
  overflow: hidden;
}
.cl-modal__head {
  padding: 20px 24px 8px;
}
.cl-modal__title {
  font-size: var(--fs-18); font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.cl-modal__sub {
  font-size: var(--fs-13); color: var(--c-text-3);
}
.cl-modal__body { padding: 14px 24px 8px; }
.cl-modal__foot {
  padding: 14px 24px 18px;
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-divider);
}


/* ============================================================
   User menu pages (Profile / Notif settings / Preferences / Help)
   ============================================================ */
.cl-page-overlay {
  position: fixed; inset: 0;
  background: oklch(20% 0.01 240 / 0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms;
  z-index: 110;
  padding: 24px;
}
.cl-page-overlay.is-open { opacity: 1; pointer-events: auto; }
.cl-page {
  background: var(--c-surface);
  border-radius: var(--r-12);
  box-shadow: var(--sh-lg);
  width: 560px; max-width: 100%;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  transform: translateY(8px) scale(0.985);
  transition: transform 180ms;
}
.cl-page-overlay.is-open .cl-page { transform: translateY(0) scale(1); }
.cl-page__head {
  display: flex; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border);
}
.cl-page__head h2 { margin: 0; font-size: 16px; font-weight: var(--fw-semibold); flex: 1; }
.cl-page__close {
  width: 28px; height: 28px;
  background: none; border: 1px solid var(--c-border); border-radius: var(--r-4);
  cursor: pointer; color: var(--c-text-3); font-family: inherit;
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.cl-page__close:hover { background: var(--c-surface-2); color: var(--c-text); }
.cl-page__body { padding: 20px 22px 24px; overflow: auto; }

/* --- Profile --- */
.cl-profile {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-divider);
  margin-bottom: 18px;
}
.cl-profile__av {
  width: 56px; height: 56px; border-radius: 50%;
  background: oklch(70% 0.10 30); color: #fff;
  font-size: 18px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.cl-profile__name { font-size: 18px; font-weight: var(--fw-semibold); color: var(--c-text); letter-spacing: -0.01em; }
.cl-profile__role { font-size: 13px; color: var(--c-text-2); margin-top: 2px; }
.cl-profile__org  { font-size: 12px; color: var(--c-text-3); font-family: var(--font-mono); margin-top: 4px; }

.cl-kv { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.cl-kv__row { display: grid; grid-template-columns: 140px 1fr; align-items: baseline; gap: 12px; }
.cl-kv__k { color: var(--c-text-3); font-size: 12px; }
.cl-kv__v { color: var(--c-text); }

/* --- Toggle --- */
.cl-toggle {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--c-divider);
}
.cl-toggle:last-child { border-bottom: 0; }
.cl-toggle input { display: none; }
.cl-toggle__sw {
  width: 36px; height: 20px;
  background: var(--c-border-strong);
  border-radius: 999px;
  position: relative;
  transition: background 160ms;
}
.cl-toggle__sw::after {
  content: ""; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%; background: #fff;
  transition: transform 160ms;
  box-shadow: 0 1px 2px oklch(20% 0.01 240 / 0.25);
}
.cl-toggle input:checked + .cl-toggle__sw { background: var(--c-primary-600); }
.cl-toggle input:checked + .cl-toggle__sw::after { transform: translateX(16px); }
.cl-toggle__txt { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cl-toggle__txt b { font-weight: var(--fw-semibold); color: var(--c-text); }
.cl-toggle__txt span { color: var(--c-text-3); font-size: 12px; line-height: 1.5; }

/* --- Segmented control --- */
.cl-pref { padding: 14px 0; border-bottom: 1px solid var(--c-divider); }
.cl-pref:last-child { border-bottom: 0; }
.cl-pref__head { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-text-3); margin-bottom: 8px; }
.cl-pref__hint { font-size: 12px; color: var(--c-text-3); margin-top: 6px; }
.cl-seg {
  display: inline-flex;
  padding: 3px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-6);
}
.cl-seg button {
  padding: 5px 14px;
  font-size: 12px; font-weight: var(--fw-medium);
  background: transparent; border: 0; border-radius: var(--r-4);
  color: var(--c-text-2); cursor: pointer; font-family: inherit;
}
.cl-seg button.is-on { background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-xs); }

/* --- Help --- */
.cl-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cl-help-grp__head { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-text-3); margin-bottom: 8px; }
.cl-help-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--c-text-2); }
.cl-help-row span:first-child { flex: 1; }
.cl-help-foot { margin-top: 16px; font-size: 12px; color: var(--c-text-3); }

/* --- QA report --- */
.cl-qa__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.cl-qa__card { padding: 12px 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-6); }
.cl-qa__lbl { font-size: 11px; color: var(--c-text-3); font-weight: var(--fw-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.cl-qa__val { font-size: 22px; font-weight: var(--fw-semibold); letter-spacing: -0.015em; margin-top: 4px; color: var(--c-text); }
.cl-qa__sub { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
.cl-qa h3 { font-size: 13px; margin: 16px 0 6px; }
.cl-qa ul { margin: 0; padding-left: 18px; }
.cl-qa li { font-size: 13px; line-height: 1.6; color: var(--c-text-2); margin-bottom: 4px; }

/* ============================================================
   Compact density (set on body by Preferences)
   ============================================================ */
body.density-compact table.q tbody td { height: 24px; padding: 4px 16px; }
body.density-compact table.q thead th { padding: 6px 16px; }
body.density-compact .claim-cell__id   { font-size: 12px; }
body.density-compact .claim-cell__meta { font-size: 11px; }
body.density-compact .prov-cell__name  { font-size: 13px; }
body.density-compact .prov-cell__meta  { font-size: 11px; }
body.density-compact .pri-flag         { font-size: 12px; }
body.density-compact .rec-text         { font-size: 12px; }

/* ============================================================
   Shared components (see index.html)
   ============================================================ */
.status-chip{white-space:nowrap;gap:6px}
.status-chip .dot{width:6px;height:6px}
.badge--warning.status-chip .dot{background:var(--c-warning-600)}
.badge--primary.status-chip .dot{background:var(--c-primary-500)}
.badge--success.status-chip .dot{background:var(--c-success-600)}
.badge--neutral.status-chip .dot{background:var(--c-text-3)}
.exc-chip{background:var(--c-surface);color:var(--c-text-2);border-color:var(--c-border-strong)}
.spin{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:cl-spin 900ms linear infinite;flex:none;display:inline-block}
@keyframes cl-spin{to{transform:rotate(360deg)}}
.sync-ctrl{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-13);color:var(--c-text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.sync-ctrl .btn{gap:5px}
.sync-ctrl .spin{width:11px;height:11px}

/* ============================================================
   Color meaning (see index.html, Color Meaning). One role per color:
   outcome (Recommendation Chip), status (Status Chip), primary action (teal),
   category (four work-area hues), and data cues: signed money, time against a limit,
   amount out of 100, ranking. Everything else is neutral.
   ============================================================ */

/* Recommendation Chip: compact for tables, prominent for the recommendation card */
.rec-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-4);font-size:var(--fs-12);font-weight:var(--fw-semibold);letter-spacing:.01em;white-space:nowrap;flex:none;border:1px solid transparent}
.rec-chip--deny{background:var(--c-danger-50);color:var(--c-danger-700);border-color:var(--c-danger-100)}
.rec-chip--pay{background:var(--c-success-50);color:var(--c-success-700);border-color:var(--c-success-100)}
.rec-chip--adjust{background:var(--c-warning-50);color:var(--c-warning-700);border-color:var(--c-warning-100)}
.rec-chip--lg{height:auto;gap:12px;padding:8px 16px 8px 14px;border-radius:var(--r-8);font-size:26px;letter-spacing:-.015em;line-height:1.2;color:var(--c-text);border-width:1.5px;font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rec-chip--lg::before{content:"";width:12px;height:12px;border-radius:50%;flex:none}
.rec-chip--lg.rec-chip--deny{background:var(--c-danger-50);border-color:var(--c-danger-500)}.rec-chip--lg.rec-chip--deny::before{background:var(--c-danger-600)}
.rec-chip--lg.rec-chip--pay{background:var(--c-success-50);border-color:var(--c-success-500)}.rec-chip--lg.rec-chip--pay::before{background:var(--c-success-600)}
.rec-chip--lg.rec-chip--adjust{background:var(--c-warning-50);border-color:var(--c-warning-500)}.rec-chip--lg.rec-chip--adjust::before{background:var(--c-warning-500)}

/* Decision Bar: Agree is the one primary action, the others are neutral */
.actions{display:grid;grid-template-columns:auto minmax(220px,1fr);gap:16px;align-items:center;padding:12px 24px;background:var(--c-surface);border-top:1px solid var(--c-border-strong);box-shadow:0 -2px 8px -2px oklch(20% 0.01 240 / .04);z-index:10}
.actions__group{display:flex;align-items:center;gap:10px;min-width:0}
.actions__count{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--c-text);font-variant-numeric:tabular-nums;white-space:nowrap;margin-right:6px}
.actions__end{display:flex;align-items:flex-end;gap:10px;min-width:0}
.actions__end .actions__note{flex:1;min-width:0}
.actions__note .input{height:36px;margin-top:4px}
.actions__note-lbl{display:block;font-size:11px;font-weight:var(--fw-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--c-text-3)}
.actions__note.is-required{border-radius:var(--r-6);box-shadow:0 0 0 2px oklch(72% 0.130 75 / .20)}
.actions__note.is-required .actions__note-lbl{color:var(--c-warning-700)}

/* Page Header: breadcrumb of ancestor pages (links only) above the page title. Used on every screen below the top level. */
.crumb{display:flex;align-items:center;gap:6px;font-size:var(--fs-13);color:var(--c-text-3);min-width:0;white-space:nowrap;margin:0 0 4px}
.crumb a{flex:none;color:var(--c-text-2);font-weight:var(--fw-medium)}
.crumb a:last-of-type:not(:first-of-type){flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.crumb a:hover{color:var(--c-text);text-decoration:underline}
.crumb svg{color:var(--c-text-4);flex:none}
.page-title{margin:0;font-size:var(--fs-24);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-tight);line-height:1.2;color:var(--c-text);min-width:0;overflow-wrap:anywhere}

/* ============================================================
   Controls: one definition each (see Conventions, Controls).
   Buttons are the design system .btn: Primary, Secondary, Ghost; default 32px, Small 28px.
   ============================================================ */
/* Decision Bar buttons are standard buttons: Agree is Primary, the rest are Secondary. */
.vbtn{min-width:96px}
.vbtn .kbd{margin-left:6px}
.btn--secondary.vbtn.is-on{background:var(--c-surface-3);border-color:var(--c-text-3)}
.btn--primary.vbtn.is-on{background:var(--c-primary-700)}
.btn--secondary .kbd{background:var(--c-surface-2)}
/* Buttons built as links keep button colors in every state */
a.btn,a.btn:hover{text-decoration:none}
a.btn--primary,a.btn--primary:hover,a.btn--primary:visited{color:var(--c-text-on-accent)}
a.btn--secondary,a.btn--secondary:hover,a.btn--secondary:visited{color:var(--c-text)}
a.btn--ghost,a.btn--ghost:visited{color:var(--c-text-2)}a.btn--ghost:hover{color:var(--c-text)}
/* Icon Button: close and remove actions in panels, dialogs, drawers and lists */
body .sp__close,body .file__rm,body .cl-page__close,body .vh-close,body .cmp-close,body .doc-find__close,body .em-close,body .drawer__close{width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:var(--r-6);background:transparent;color:var(--c-text-3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
body .sp__close:hover,body .file__rm:hover,body .cl-page__close:hover,body .vh-close:hover,body .cmp-close:hover,body .doc-find__close:hover,body .em-close:hover,body .drawer__close:hover{background:var(--c-surface-3);color:var(--c-text);border-color:transparent}
/* Segmented Control: one look for every exclusive switch */
body .seg,body .chart-card__toggle,body .seg-ctl,.cl-seg{display:inline-flex;gap:2px;padding:3px;background:var(--c-surface-3);border:1px solid var(--c-border);border-radius:var(--r-6);width:max-content;max-width:100%}
body .seg button,body .chart-card__toggle button,body .seg-ctl label,.cl-seg button{display:inline-flex;align-items:center;height:26px;padding:0 12px;border:1px solid transparent;border-radius:var(--r-4);background:transparent;color:var(--c-text-2);font:inherit;font-size:var(--fs-12);font-weight:var(--fw-medium);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
body .seg button:hover,body .chart-card__toggle button:hover,body .seg-ctl label:hover,.cl-seg button:hover{color:var(--c-text)}
body .seg button:focus-visible,body .chart-card__toggle button:focus-visible,body .seg-ctl label:has(input:focus-visible),.cl-seg button:focus-visible{outline:2px solid var(--c-primary-500);outline-offset:1px}
body .seg button.is-on,body .chart-card__toggle button.is-on,body .seg-ctl label:has(input:checked),.cl-seg button.is-on{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border-strong);box-shadow:var(--sh-sm)}
body .seg-ctl label+label{border-left:0}
/* Links: Text Link (primary) and Breadcrumb Link (muted) */
a{color:var(--c-primary-700);text-decoration:none}
a:not([class]),.link,.sp__lib{font-weight:var(--fw-medium)}
a:hover{text-decoration:underline}
a.btn:hover,.cl-side a:hover,.cl-topbar a:hover,tr a:hover .row-go{text-decoration:none}
.crumb a:hover{color:var(--c-text)}
.link-btn,body .dbanner__undo{background:none;border:0;padding:0;font:inherit;font-weight:var(--fw-medium);color:var(--c-primary-700);cursor:pointer}
.link-btn:hover,body .dbanner__undo:hover{color:var(--c-primary-700);text-decoration:underline}

/* ============================================================
   Page structure, tables, cards and fields: one definition each.
   Page edge 32px, header top 24px. Page title 24px. Status line 14px.
   Table header 12px Title Case, cell 14px with 14px by 16px padding, card table edges 20px.
   Cards 12px radius. Fields 32px with 6px radius.
   ============================================================ */
body .header h1,body .page__title,body .page-title,body .topbar__title,body .bhead__title{font-size:var(--fs-24);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-tight);line-height:1.2}
body .header__sub,body .bhead__status{font-size:var(--fs-14);color:var(--c-text-2)}
body .table th,body table.q thead th,body .dis-tbl thead th{font-size:var(--fs-12);font-weight:var(--fw-semibold);letter-spacing:0;text-transform:none;color:var(--c-text-3);background:var(--c-surface-2);padding:12px 16px;height:auto;border-bottom:1px solid var(--c-border)}
body .table td,body table.q tbody td,body .dis-tbl tbody td{font-size:var(--fs-14);padding:14px 16px;height:auto}
body .tcard .table th:first-child,body .tcard .table td:first-child,body .dis-tbl thead th:first-child,body .dis-tbl tbody td:first-child{padding-left:20px}
body .tcard .table th:last-child,body .tcard .table td:last-child,body .dis-tbl thead th:last-child,body .dis-tbl tbody td:last-child{padding-right:20px}
body table.q thead th:first-child,body table.q tbody td:first-child{padding-left:32px}
body table.q thead th:last-child,body table.q tbody td:last-child{padding-right:32px}
body .rec,body .hero-card,body .chart-card,body .table-block,body .submetric,body .alert-card{border-radius:var(--r-12)}
body .input,body .select,body .um-input,body .um-select,body .tree-search,body .search{height:var(--ctrl-h-lg);border-radius:var(--r-6);border-color:var(--c-border-strong)}
body .actions__note .input{height:var(--ctrl-h-lg)}
body .tree-search{font-size:var(--fs-13)}

body .tcard{overflow-y:hidden}

.qtab.is-active:hover{color:var(--c-text)}
.pager button.is-on:hover{background:var(--c-primary-50) !important;color:var(--c-primary-700) !important}

.crumb span{color:var(--c-text-3)}

/* Spinner spacing: 6px in chips, 8px beside body text and in buttons */
.busy{display:inline-flex !important;align-items:center;gap:8px}
.btn .spin{margin-right:2px}

/* Header: notifications, help and the user menu, right-aligned */
.cl-pop-wrap{position:relative;display:inline-flex}
.cl-iconbtn{position:relative;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--r-6);background:transparent;color:var(--c-text-2);cursor:pointer}
.cl-iconbtn:hover,.cl-pop-wrap.is-open .cl-iconbtn{background:var(--c-surface-3);color:var(--c-text)}
.cl-iconbtn:focus-visible,.cl-headuser:focus-visible{outline:2px solid var(--c-primary-500);outline-offset:1px}
.cl-iconbtn__dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--c-warning-500);box-shadow:0 0 0 2px var(--c-surface)}
.cl-notif-pop{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:360px;max-width:calc(100vw - 32px);background:var(--c-surface);border:1px solid var(--c-border-strong);border-radius:var(--r-8);box-shadow:var(--sh-lg);overflow:hidden}
.cl-pop-wrap.is-open .cl-notif-pop{display:block}
.cl-notif-pop__head{padding:12px 14px 10px;font-size:var(--fs-13);font-weight:var(--fw-semibold);color:var(--c-text);border-bottom:1px solid var(--c-divider)}
.cl-notif-pop__list{max-height:min(420px,60vh);overflow-y:auto;padding:4px}
.cl-notif{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:var(--r-6);text-decoration:none;color:var(--c-text)}
.cl-notif:hover,.cl-notif:focus-visible{background:var(--c-surface-2);outline:0}
.cl-notif__item{font-size:var(--fs-13);font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-notif__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-12);color:var(--c-text-3)}
.cl-notif__due{font-size:var(--fs-12);color:var(--c-text-3)}
.cl-notif-pop__empty{padding:16px 10px;font-size:var(--fs-13);color:var(--c-text-3)}
.cl-notif-pop__foot{display:block;padding:10px 14px;border-top:1px solid var(--c-divider);font-size:var(--fs-13);font-weight:var(--fw-medium);color:var(--c-primary-600);text-decoration:none}
.cl-notif-pop__foot:hover{background:var(--c-surface-2);color:var(--c-primary-700)}

/* Header tools sit at the right end of the page title row */
.cl-headtools{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none;align-self:flex-start;margin-top:-5px}
.ui-ph__actions+.cl-headtools{margin-left:12px;padding-left:12px;border-left:1px solid var(--c-divider)}
.cl-headuser{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 4px;border:1px solid transparent;border-radius:var(--r-8);background:transparent;font:inherit;color:var(--c-text);cursor:pointer;text-align:left}
.cl-headuser:hover,.cl-user-wrap.is-open .cl-headuser{background:var(--c-surface-3)}
.cl-headuser>svg{color:var(--c-text-3)}
.cl-headuser__avatar{width:30px;height:30px;border-radius:50%;background:oklch(70% 0.10 30);color:#fff;font-size:11px;font-weight:var(--fw-semibold);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cl-headuser__text{display:flex;flex-direction:column;line-height:1.2}
.cl-headuser__name{font-size:var(--fs-13);font-weight:var(--fw-semibold);white-space:nowrap}
.cl-headuser__role{font-size:var(--fs-12);color:var(--c-text-3);white-space:nowrap}
@media (max-width:1180px){.cl-headuser__text{display:none}}

.cl-user-pop--header{width:240px;padding:4px}