/* =============================================================================
   ProSuitability signed-in app — component layer (Hybrid B)
   Loaded after marketing.css. Maps legacy .btn-* classes used across the
   workbench to corporate tokens; light chrome surfaces.
   ============================================================================= */

/* Semantic action buttons (preserve roles, use marketing palette) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-text-on-accent); }
.btn-primary:disabled, .btn-primary.is-disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
  opacity: 0.65;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  background: var(--green-700);
  color: var(--color-text-on-brand);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-success:hover { background: var(--green-500); color: var(--color-text-on-brand); }
.btn-success:disabled, .btn-success.is-disabled { opacity: 0.5; cursor: not-allowed; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  background: var(--red-700);
  color: var(--color-text-on-brand);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-danger:hover { background: var(--red-500); color: var(--color-text-on-brand); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
}
.btn-secondary:hover { background: var(--btn-ghost-bg-hover); }

.btn-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  background: var(--amber-500);
  color: var(--color-text-on-brand);
  border: none;
  cursor: pointer;
}
.btn-warn:hover { background: var(--amber-700); }

.btn-soft-success {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid color-mix(in srgb, var(--green-500) 35%, transparent);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  font-size: var(--text-sm);
}

/* App layout */
.app-main {
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  padding-block: clamp(1.5rem, 3vw, 2rem);
}

.app-subscription-banner {
  border-bottom: 1px solid var(--color-border);
  padding: 0.65rem var(--space-gutter);
  font-size: var(--text-sm);
}
.app-subscription-banner--warning {
  background: var(--amber-50);
  color: var(--amber-700);
  border-bottom-color: color-mix(in srgb, var(--amber-500) 25%, var(--color-border));
}
.app-subscription-banner--error {
  background: var(--red-50);
  color: var(--red-700);
}
.app-subscription-banner--info {
  background: var(--blue-50);
  color: var(--blue-700);
}

.app-account-meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#global-indicator {
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  font-size: var(--text-xs);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(14, 31, 50, 0.12);
}

/* =============================================================================
   Workbench dense UI (report constructor, content manager, case folder)
   ============================================================================= */

.workbench-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
.workbench-toolbar-btn:hover:not(:disabled):not([disabled]) {
  background: var(--btn-ghost-bg-hover);
}
.workbench-toolbar-btn-primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: transparent;
  font-weight: 600;
}
.workbench-toolbar-btn-primary:hover:not(:disabled):not([disabled]) {
  background: var(--color-accent-hover);
}

.cm-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  font-size: inherit;
  line-height: 1.3;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  cursor: pointer;
}
.cm-btn-primary:hover { background: var(--color-accent-hover); }
.cm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.cm-btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  font-size: inherit;
  line-height: 1.3;
  background: var(--green-700);
  color: var(--color-text-on-brand);
  cursor: pointer;
}
.cm-btn-success:hover { background: var(--green-500); }

.wb-input,
.wb-select,
.workbench-compact-shell input[type="search"],
.workbench-compact-shell input[type="text"],
.workbench-compact-shell input:not([type]),
.workbench-compact-shell select,
.workbench-compact-shell textarea {
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.workbench-compact-shell input:focus,
.workbench-compact-shell select:focus,
.workbench-compact-shell textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  outline-offset: 1px;
}

.wb-selected { background: var(--teal-50); }
.wb-selected-strong { background: var(--teal-100); }
.hover\:wb-selected:hover { background: var(--teal-50); }
.focus\:wb-selected:focus { background: var(--teal-50); }

.wb-filter-active {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  background: var(--teal-50);
  color: var(--teal-700);
}

.wb-chip-action {
  color: var(--color-text-tertiary);
  border-color: var(--color-border-strong);
}
.wb-chip-action:hover {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
}

.wb-callout {
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
  background: var(--teal-50);
  border-radius: 8px;
}

.wb-table-head {
  background: var(--navy-50);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}
.wb-table-row:hover { background: color-mix(in srgb, var(--teal-50) 80%, transparent); }

.wb-muted { color: var(--color-text-tertiary); }
.wb-text { color: var(--color-text-primary); }
.wb-text-secondary { color: var(--color-text-secondary); }

/* Report constructor surfaces */
.report-constructor-page .report-workbench {
  background: var(--color-bg-app);
}
.report-constructor-page .report-pane,
.report-constructor-page .report-action-card {
  border-color: var(--color-border);
  background: var(--color-surface);
}
.report-constructor-page .report-pane-header.map {
  color: var(--navy-700);
  background: var(--navy-50);
  border-color: var(--navy-100);
}
.report-constructor-page .map-section-btn.map-tint-blue {
  color: var(--color-accent);
}
.report-constructor-page .map-section-btn:hover {
  background: var(--btn-ghost-bg-hover);
}
.report-constructor-page .map-section-btn.ring-1 {
  background: var(--navy-100);
}

/* Content manager panes */
.content-manager-shell .content-manager-pane {
  border-color: var(--color-border);
  background: var(--color-surface);
}
.content-manager-shell .cm-attachments-viewport {
  border-color: var(--color-border);
  background: var(--color-bg-app);
}
.content-manager-shell .cm-markup-shared {
  border-color: var(--color-border-strong);
}

/* Compact row-action pills (case folder advice-process and recommendation tables) */
a.wb-row-btn,
button.wb-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  appearance: none;
  -webkit-appearance: none;
}

/* Edit / Restore — teal accent pill (matches workbench primary actions) */
a.wb-row-btn,
button.wb-row-btn.wb-row-btn-accent {
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border-strong));
  background: var(--teal-50);
  color: var(--teal-700);
}
a.wb-row-btn:hover,
button.wb-row-btn.wb-row-btn-accent:hover {
  background: var(--teal-100);
  color: var(--teal-800);
  text-decoration: none;
}

/* Remove — visible destructive pill */
button.wb-row-btn.wb-row-btn-danger {
  border: 1px solid color-mix(in srgb, var(--red-700) 50%, var(--color-border-strong));
  background: var(--red-50);
  color: var(--red-700);
}
button.wb-row-btn.wb-row-btn-danger:hover {
  background: color-mix(in srgb, var(--red-500) 18%, var(--red-50));
  color: var(--red-800);
}

/* Typed-yes confirmation dialog (recommendation remove, etc.) */
.wb-typed-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--navy-900) 45%, transparent);
}
.wb-typed-confirm-panel {
  width: 100%;
  max-width: 22rem;
  padding: 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgba(14, 31, 50, 0.18);
}
.wb-typed-confirm-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}
.wb-typed-confirm-desc {
  margin: 0.5rem 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}
.wb-typed-confirm-label {
  display: block;
  margin-top: 1rem;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}
.wb-typed-confirm-input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.wb-typed-confirm-input:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  outline-offset: 1px;
}
.wb-typed-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
.wb-typed-confirm-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =============================================================================
   Signed-in app density (Comfortable default / Compact legacy)
   body.app-shell is set on base.html only — marketing pages are unchanged.
   ============================================================================= */

body.app-shell.app-density-compact {
  --container-content: 1200px;
  --container-workbench: 90rem;
  --app-nav-size: 0.75rem;
  --app-brand-size: 1.25rem;
  --app-workbench-brand-size: 0.95rem;
  --app-workbench-tab-size: 0.75rem;
  --app-workbench-status-size: 0.75rem;
  --app-account-meta-size: 0.75rem;
  --app-workbench-header-pad-y: 0.25rem;
  --app-workbench-header-min-h: 2.25rem;
}

body.app-shell.app-density-comfortable {
  --container-content: 1440px;
  --container-workbench: 108rem;
  --text-xs: 0.9rem;
  --text-sm: 1.05rem;
  --app-nav-size: 0.9375rem;
  --app-brand-size: 1.35rem;
  --app-workbench-brand-size: 1.25rem;
  --app-workbench-tab-size: 0.9rem;
  --app-workbench-status-size: 0.9rem;
  --app-account-meta-size: 0.8125rem;
  --app-workbench-header-pad-y: 0.35rem;
  --app-workbench-header-min-h: 2.5rem;
}

body.app-shell .site-nav .container,
body.app-shell .app-main,
body.app-shell .app-subscription-banner .container {
  max-width: var(--container-content, 1200px);
}

body.app-shell:has(.adviser-workbench) .site-nav .container,
body.app-shell:has(.adviser-workbench) main.workbench-main,
body.app-shell:has(.report-constructor-page) .site-nav .container,
body.app-shell:has(.report-constructor-page) main {
  max-width: var(--container-workbench, 90rem);
}

body.app-shell .site-nav .brand-wordmark {
  font-size: var(--app-brand-size, 1.25rem);
}

body.app-shell:has(.adviser-workbench) .site-nav .brand-wordmark {
  font-size: var(--app-workbench-brand-size, 0.95rem);
}

body.app-shell:has(.adviser-workbench) .site-nav .nav-link {
  font-size: var(--app-nav-size, 0.75rem);
}

body.app-shell.app-density-comfortable .site-nav .nav-link {
  font-size: var(--app-nav-size, 0.9375rem);
}

body.app-shell .app-account-meta {
  font-size: var(--app-account-meta-size, 0.75rem);
}

body.app-shell:has(.adviser-workbench) .site-nav .container > div:first-child {
  padding-top: var(--app-workbench-header-pad-y, 0.25rem);
  padding-bottom: var(--app-workbench-header-pad-y, 0.25rem);
  min-height: var(--app-workbench-header-min-h, 2.25rem);
}

body.app-shell:has(.adviser-workbench) .workbench-tab {
  font-size: var(--app-workbench-tab-size, 0.75rem);
  padding: 0.4rem 0.95rem;
}

body.app-shell:has(.adviser-workbench) .workbench-client-label {
  font-size: var(--app-workbench-tab-size, 0.75rem);
}

body.app-shell:has(.adviser-workbench) .workbench-status {
  font-size: var(--app-workbench-status-size, 0.75rem);
}

body.app-shell.app-density-comfortable .text-xs {
  font-size: var(--text-xs);
}

body.app-shell.app-density-comfortable .text-sm {
  font-size: var(--text-sm);
}

body.app-shell.app-density-comfortable .case-folder-shell .case-folder-pane-header {
  font-size: var(--text-xs);
}

body.app-shell.app-density-compact .case-folder-shell .case-folder-pane-header {
  font-size: 0.75rem;
}

body.app-shell.app-density-comfortable .case-folder-shell .text-\[10px\] {
  font-size: 0.75rem;
}

body.app-shell.app-density-compact .case-folder-shell .text-\[10px\] {
  font-size: 0.625rem;
}

body.app-shell.app-density-comfortable .case-folder-shell button.wb-row-btn.wb-row-btn-accent {
  font-size: 0.825rem;
}

body.app-shell.app-density-compact .case-folder-shell button.wb-row-btn.wb-row-btn-accent {
  font-size: 0.6875rem;
}

body.app-shell.app-density-compact:has(.adviser-workbench) .staging-beta-label {
  font-size: 0.55rem;
  margin-top: 0.05rem;
}

body.app-shell.app-density-comfortable:has(.adviser-workbench) .staging-beta-label {
  font-size: 0.7rem;
}

/* Workbench data shells (Client Address Book, Case Folder, Content Manager, …) */
body.app-shell.app-density-compact .case-folder-shell,
body.app-shell.app-density-compact .workbench-compact-shell {
  font-size: 0.6875rem;
  line-height: 1.35;
}
body.app-shell.app-density-compact .case-folder-shell .text-xs,
body.app-shell.app-density-compact .workbench-compact-shell .text-xs {
  font-size: 0.6875rem;
}
body.app-shell.app-density-compact .case-folder-shell .text-sm,
body.app-shell.app-density-compact .workbench-compact-shell .text-sm {
  font-size: 0.75rem;
}
body.app-shell.app-density-compact .case-folder-shell .text-base,
body.app-shell.app-density-compact .workbench-compact-shell .text-base {
  font-size: 0.8125rem;
}
body.app-shell.app-density-compact .workbench-compact-shell h1 {
  font-size: 0.75rem;
  line-height: 1.35;
}
body.app-shell.app-density-compact .workbench-compact-shell .client-address-table th,
body.app-shell.app-density-compact .workbench-compact-shell .client-address-table td {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

body.app-shell.app-density-comfortable .case-folder-shell,
body.app-shell.app-density-comfortable .workbench-compact-shell {
  font-size: var(--text-sm);
  line-height: 1.45;
}
body.app-shell.app-density-comfortable .case-folder-shell .text-xs,
body.app-shell.app-density-comfortable .workbench-compact-shell .text-xs {
  font-size: var(--text-xs);
}
body.app-shell.app-density-comfortable .case-folder-shell .text-sm,
body.app-shell.app-density-comfortable .workbench-compact-shell .text-sm {
  font-size: var(--text-sm);
}
body.app-shell.app-density-comfortable .case-folder-shell .text-base,
body.app-shell.app-density-comfortable .workbench-compact-shell .text-base {
  font-size: 1.125rem;
}
body.app-shell.app-density-comfortable .workbench-compact-shell h1 {
  font-size: 1.125rem;
  line-height: 1.35;
}
body.app-shell.app-density-comfortable .workbench-compact-shell .client-address-table th,
body.app-shell.app-density-comfortable .workbench-compact-shell .client-address-table td {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}