/**
 * Core Lexes design system — reusable tokens & utilities (authoritative).
 * Palette: white content, dark navy chrome, gold/yellow primary actions.
 * Typography: Times New Roman 12pt. Compact density without scaling text down.
 * Active matter subtabs stay GOLD — do not switch to navy.
 */

:root {
  --clx-navy: #0f172a;
  --clx-gold: #c9a227;
  --clx-gold-hover: #b8921f;
  --clx-content-bg: #ffffff;
  --clx-border: #dcdcdc;
  --clx-font: "Times New Roman", Times, serif;
  --clx-text-navy: #1e293b;
  --clx-btn-radius: 6px;

  /* Compact spacing scale (do not invent one-off paddings) */
  --clx-space-1: 4px;
  --clx-space-2: 8px;
  --clx-space-3: 12px;
  --clx-space-4: 16px;
  --clx-page-pad-y: 8px;
  --clx-page-pad-x: 12px;
  --clx-page-gap: 8px;
  /* Narrow content-fit sidebar (aligned with app.css / chrome-modern; fitSidebarWidth may nudge). */
  --clx-sidebar-width: 158px;
  --clx-sidebar-pad-y: 6px;
  --clx-sidebar-pad-x: 4px;
  --clx-sidebar-gap: 6px;
  --clx-sidebar-link-pad-y: 3px;
  --clx-sidebar-link-pad-x: 6px;
  --clx-sidebar-section-mt: 8px;
  --clx-sidebar-logo-max: 88px;
  --clx-header-pad-y: 5px;
  --clx-header-pad-x: 12px;
  --clx-panel-gap: 8px;
  --clx-panel-pad-y: 8px;
  --clx-panel-pad-x: 10px;
  --clx-panel-hdr-pad-y: 3px;
  --clx-panel-hdr-pad-x: 8px;
  --clx-btn-pad-y: 2px;
  --clx-btn-pad-x: 8px;
  --clx-subtab-pad-y: 4px;
  --clx-subtab-pad-x: 10px;
  --clx-subtab-gap: 6px;
  --clx-mh-title-size: 14pt;
  --clx-hint-size: 14px;
}

/* ----- Panel shell (navy header + white body) ----- */
.clx-panel {
  border: 1px solid var(--clx-border);
  border-radius: 0;
  background: var(--clx-content-bg);
  overflow: visible;
  font-family: var(--clx-font);
  font-size: 12pt;
}

.clx-panel-header {
  background: var(--clx-navy);
  background-color: var(--clx-navy);
  color: #ffffff;
  border-radius: 0;
  padding: var(--clx-panel-hdr-pad-y) var(--clx-panel-hdr-pad-x);
  min-height: 22px;
  line-height: 1.1;
  font-family: var(--clx-font);
  font-size: 12pt;
  font-weight: 600;
}

.clx-panel-body {
  background: var(--clx-content-bg);
  background-color: #ffffff;
  border: none;
  border-top: 1px solid var(--clx-border);
  padding: var(--clx-panel-pad-y) var(--clx-panel-pad-x);
  box-shadow: none;
  font-family: var(--clx-font);
  font-size: 12pt;
}

/* ----- Gold primary CTA (rounded) ----- */
.clx-btn-gold {
  display: inline-block;
  background: var(--clx-gold);
  background-color: var(--clx-gold);
  border: 1px solid var(--clx-gold);
  color: #000000;
  -webkit-text-fill-color: #000000;
  font-family: var(--clx-font);
  font-size: 12pt;
  font-weight: 700;
  line-height: 1.15;
  padding: var(--clx-btn-pad-y) var(--clx-btn-pad-x);
  border-radius: var(--clx-btn-radius);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}

.clx-btn-gold:hover,
.clx-btn-gold:focus,
.clx-btn-gold:active {
  background: var(--clx-gold-hover);
  background-color: var(--clx-gold-hover);
  border-color: var(--clx-gold-hover);
  color: #000000;
  -webkit-text-fill-color: #000000;
  text-decoration: none;
}

/* ----- Navy card header: TITLE [?] left | actions right ----- */
.clx-navy-hdr {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Summary banner gold text actions (Edit / + Add / + Log) */
.summary-banner-action-btn.clx-ms-btn-gold,
#summary-pane .summary-banner-action-btn.clx-ms-btn-gold {
  text-transform: none !important;
  border-radius: var(--clx-btn-radius) !important;
  padding: var(--clx-btn-pad-y) 10px !important;
  font-size: 10pt !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
}

/*
 * .clx-subtab-active PATTERN (do not invert to navy):
 * Matter / Billing subtab pills use GOLD for the active tab.
 */
.clx-subtab-active {
  background: var(--clx-gold) !important;
  background-color: var(--clx-gold) !important;
  border-color: var(--clx-gold) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* ----- Help tip icon: visible "?" in gold-ringed white circle (never empty) ----- */
.clx-field-hint-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: var(--clx-hint-size) !important;
  height: var(--clx-hint-size) !important;
  min-width: var(--clx-hint-size) !important;
  min-height: var(--clx-hint-size) !important;
  padding: 0 !important;
  margin-left: 0.2rem;
  border: 1.5px solid var(--clx-gold) !important;
  border-radius: 50% !important;
  font-family: var(--clx-font) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--clx-navy) !important;
  -webkit-text-fill-color: var(--clx-navy) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  cursor: help;
  vertical-align: middle;
  flex-shrink: 0;
  user-select: none;
  position: relative;
  top: 0;
}

.clx-field-hint-icon:focus {
  outline: 2px solid var(--clx-gold);
  outline-offset: 1px;
}

/* On navy banners: keep white fill + navy "?" so the mark stays readable */
.clx-navy-hdr .clx-field-hint-icon,
.clx-card-header .clx-field-hint-icon,
.card-header .clx-field-hint-icon,
#matter-tabs-card .clx-card-header .clx-field-hint-icon,
#matter-tabs-card .card-header .clx-field-hint-icon {
  color: var(--clx-navy) !important;
  -webkit-text-fill-color: var(--clx-navy) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: var(--clx-gold) !important;
}

.clx-field-hint-pop {
  font-family: var(--clx-font);
  border-color: var(--clx-navy);
  background: #ffffff;
  color: var(--clx-text-navy);
}

.clx-field-hint-pop-title {
  font-weight: 700;
  font-size: 11pt;
  color: var(--clx-navy);
  margin: 0 0 0.2rem 0;
  line-height: 1.25;
}

.clx-field-hint-pop-body {
  font-weight: 400;
  font-size: 11pt;
  color: #111;
  line-height: 1.38;
  margin: 0;
}

/* Compact page shell utilities (opt-in + applied from app.css) */
.clx-page-compact {
  padding: var(--clx-page-pad-y) var(--clx-page-pad-x);
  gap: var(--clx-page-gap);
}

.clx-panel-gap-row {
  --bs-gutter-x: var(--clx-panel-gap);
  --bs-gutter-y: var(--clx-panel-gap);
}