html {
  overflow-y: scroll;
}

body {
  overflow-y: scroll;
}

.rate-success {
  color: #2e7d32;
  font-size: 13px;
  margin-top: 6px;
}
@import url("corelexes.css");

#manual-payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

#manual-payment-modal .modal-content {
  width: 640px;
  max-height: 90vh;
  overflow-y: auto;
}

.entity-logo {
  max-height: 70px;
  object-fit: contain;
}

/* Financial (USD) unified grid layout */
.financial-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  column-gap: 28px;
  align-items: stretch;
  width: 100%;
}

.financial-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.financial-col strong {
  font-weight: 700;
}

.financial-col .value {
  margin-top: 6px;
  font-size: 15px;
}

.rate-warning {
  color: #b00020;
  font-size: 12pt !important;
  margin-top: 4px;
}

.financial-col button {
  margin-top: 12px;
  align-self: flex-start;
}

.financial-col button {
  margin-top: auto;
}

.financial-col strong:first-child {
  margin-bottom: 2px;
}

.signature-preview {
  max-height: 60px;
  object-fit: contain;
}

.invoice-status-link {
  text-decoration: none;
  font-weight: 600;
}

.invoice-status-link:hover {
  text-decoration: underline;
}

/* ========== CORE LEXES GLOBAL TYPOGRAPHY RULE (NON-NEGOTIABLE) ========== */
/* Every font must be Times New Roman at 12pt (~16px). Proper desktop scale. Do not change unless superuser instructs. */
html, body, html *, body *, *, *::before, *::after, .modal, .modal *, .dropdown-menu, .dropdown-menu *, .form-control, .form-select, .btn, .alert, .tooltip, .popover { font-family: "Times New Roman", Times, serif !important; font-size: 12pt !important; }

* {
  box-sizing: border-box;
}

:root {
  font-size: 100%;
  color-scheme: light;
  --primary-banner-bg: #000000;
  --brand-earth-deep: #0f1f3a;
  --brand-earth: #1c3d6f;
  --brand-earth-dark: #16345f;
  --brand-accent: #35c0ff;
  --brand-warm: #ff9f45;
  --text-primary: #1f1f1f;
  --text-muted: #707070;
  --surface: #ffffff;
  --surface-muted: #f5f7fb;
  --border: #d0d0d0;
  --shadow-soft: 0 18px 36px rgba(15, 31, 58, 0.14);
  --shadow-card: 0 14px 28px rgba(15, 31, 58, 0.12);
  --glow: 0 0 18px rgba(53, 192, 255, 0.35);
}

body.app-body {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  background:
    radial-gradient(circle at top, rgba(255, 174, 86, 0.95) 0%, rgba(255, 206, 140, 0.58) 48%, rgba(245, 247, 251, 0) 72%),
    linear-gradient(135deg, rgba(232, 125, 58, 0.60) 0%, rgba(248, 201, 150, 0.45) 38%, rgba(236, 241, 251, 0.92) 100%) !important;
  color: var(--text-primary);
  margin: 0;
  overflow-x: hidden;
}

/* ========== GLOBAL FOOTER: Single copyright at bottom center. No right panel, no duplicates. ========== */
body {
  overflow-x: hidden;
}
/* Footer: always bottom center, never fixed/sticky/absolute, never on right */
.global-site-footer,
.global-site-footer.app-footer,
.global-site-footer.auth-footer {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  width: 100% !important;
  text-align: center !important;
  transform: none !important;
  padding: 14px 28px 22px !important;
  font-size: 12pt !important;
  color: var(--text-muted) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
.global-site-footer.app-footer {
  margin-top: auto !important;
}
.global-site-footer.auth-footer {
  margin-top: auto !important;
  padding: 14px 28px 22px !important;
}
/* Never show footer/copyright inside header - only at bottom */
.app-header footer,
.app-header .global-site-footer {
  display: none !important;
}
/* Hide footers/copyright panels that are wrongly positioned (inline styles only) */
footer[style*="position: fixed"],
footer[style*="position:fixed"],
footer[style*="position: sticky"],
footer[style*="position: absolute"][style*="right"],
footer[style*="writing-mode"] {
  display: none !important;
}
aside:not(.app-sidebar)[style*="position: fixed"],
aside:not(.app-sidebar)[style*="position:fixed"],
aside:not(.app-sidebar)[style*="right: 0"],
div[style*="right: 0"][style*="position: fixed"],
div[style*="right: 0"][style*="position:fixed"],
[style*="writing-mode: vertical"],
[style*="writing-mode:vertical"] {
  display: none !important;
}

/* Page wrapper: flex column, footer always at bottom. */
.app-page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-page-wrapper > .global-site-footer {
  flex-shrink: 0;
  margin-top: auto;
}
/* Layout: two columns only (sidebar + main). No right panel. */
.app-shell {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  background: transparent !important;
}
.app-shell > *:last-child {
  flex: 1;
  min-width: 0;
}

.app-sidebar {
  width: 300px;
  background: #000000 !important;
  color: #f2f2f2;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 6px 0 16px rgba(4, 10, 22, 0.35);
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}

.sidebar-brand {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 0;
  flex-shrink: 0;
}

.sidebar-logo,
.app-sidebar .sidebar-logo {
  color: #f7f7f7;
  font-weight: 700;
  font-size: 12pt !important;
  font-family: "Times New Roman", Times, serif !important;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.app-sidebar .brand-logo {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.sidebar-pill {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(53, 192, 255, 0.2);
  color: #e6e6e6;
  font-size: 12pt !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-section {
  font-size: 12pt !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(242, 242, 242, 0.7);
  margin-top: 10px;
}

/* User Center section title: bold, caps, underline, 14pt, not clickable */
.sidebar-section-title-user {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 14pt !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  color: #f2f2f2;
  padding: 8px 18px 4px;
  margin-top: 24px;
  margin-bottom: 0;
  cursor: default;
  letter-spacing: normal;
}

.sidebar-nav-flat {
  gap: 2px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.app-sidebar .sidebar-nav-flat .nav-link {
  color: #f2f2f2;
  border-radius: 12px;
  padding: 3px 18px;
  margin-bottom: 0;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none;
  letter-spacing: normal;
}

.app-sidebar .sidebar-nav-flat .nav-link:hover,
.app-sidebar .sidebar-nav-flat .nav-link:focus {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.app-sidebar .sidebar-nav-flat .nav-link.active {
  background: rgba(53, 192, 255, 0.2);
  color: #ffffff;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.app-sidebar .sidebar-nav-flat .nav-link.active::before {
  display: none;
}

.app-sidebar .nav-link {
  color: #f2f2f2;
  border-radius: 12px;
  padding: 3px 18px;
  font-weight: 500;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.app-sidebar .nav-link.active {
  background: rgba(53, 192, 255, 0.2);
  color: #ffffff;
  font-weight: 400;
}

/* ── Sidebar Email Tree (collapsible accounts + folders) ── */
.sb-email-tree { margin: 0; }
.sb-email-hdr {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 18px; color: #f2f2f2; cursor: pointer;
  border-radius: 12px; font-weight: 500;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  transition: background 0.15s;
  user-select: none;
}
.sb-email-hdr:hover { background: rgba(255,255,255,0.12); }
.sb-email-caret {
  display: inline-block; width: 10px; font-size: 8pt;
  color: #fff !important; transition: transform 0.25s ease;
  flex-shrink: 0; text-align: center; line-height: 1;
}
.sb-email-caret.is-open { transform: rotate(90deg); }
.sb-email-body {
  overflow: hidden; transition: max-height 0.3s ease;
}
.sb-email-acct-hdr {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 18px 2px 30px; color: rgba(255,255,255,0.9);
  cursor: pointer; border-radius: 12px;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 11pt !important; font-weight: 400;
  transition: background 0.15s; user-select: none;
}
.sb-email-acct-hdr:hover { background: rgba(255,255,255,0.10); }
.sb-email-acct-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.sb-email-acct-folders {
  overflow: hidden; max-height: 0; transition: max-height 0.25s ease;
}
.sb-email-acct-folders.is-open { max-height: 300px; }
.sb-email-fd {
  display: block !important;
  padding: 2px 18px 2px 48px !important;
  color: rgba(255,255,255,0.7) !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 11pt !important; font-weight: 400 !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  transition: background 0.15s, color 0.15s;
}
.sb-email-fd:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}
.sb-email-fd.is-active {
  background: rgba(53,192,255,0.2) !important;
  color: #fff !important;
}
.sb-email-add {
  display: block; padding: 2px 18px 2px 30px;
  color: rgba(255,255,255,0.55) !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 10pt !important; font-weight: 400;
  text-decoration: none !important; border-radius: 12px;
  transition: background 0.15s, color 0.15s;
}
.sb-email-add:hover {
  background: rgba(255,255,255,0.10);
  color: #fff !important;
}
.sb-email-empty {
  padding: 3px 18px 3px 30px;
  color: rgba(255,255,255,0.4);
  font-family: "Times New Roman", Times, serif !important;
  font-size: 10pt !important;
}

.app-sidebar .nav-link.active::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: transparent !important;
}

.app-header {
  background: #000000 !important;
  border-bottom: 1px solid var(--border);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 8px 22px rgba(15, 31, 58, 0.08);
}

.header-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header-label {
  font-weight: 600;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  color: #ffffff;
}

.header-subtitle {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  color: rgba(255, 255, 255, 0.75);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-search {
  width: 280px;
}

.app-search .form-control {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  padding-left: 14px;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  color: var(--text-primary);
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2f2f2f;
  color: #ffffff;
  font-weight: 600;
}

.app-content {
  flex: 1;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: transparent !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}

.app-content .form-control,
.app-content .form-select,
.app-content .btn,
.app-content .table,
.app-content .list-group-item {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}

.app-footer {
  padding: 14px 28px 22px;
  font-size: 12pt !important;
  color: var(--text-muted);
  text-align: center;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.page-title {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  font-weight: 700;
  color: var(--brand-earth-deep);
}

.page-subtitle {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  color: var(--text-muted);
}

/* Matter type label under matter number: prominent, black, bold, all matter types (Family Law, SSDI/SSI, etc.) */
.matter-type-label {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 14pt !important;
  font-weight: 700 !important;
  color: #000000 !important;
  line-height: 1.3;
}

/* Clean spacing between matter number and matter type when matter-type-label is present */
.page-subtitle:has(.matter-type-label) {
  margin-top: 0.2em;
  margin-bottom: 0;
}

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

.card {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
#ml-results-card{transform:none !important;transition:none !important;overflow:visible !important;}
#ml-results-card:hover{transform:none !important;box-shadow:var(--shadow-card) !important;}

/* Matter detail: tab shell must not use hover transform — it breaks position:fixed descendants (document viewer modal) and causes flicker. */
#matter-tabs-card,
#matter-tabs-card:hover {
  transform: none !important;
  box-shadow: var(--shadow-card) !important;
}

/* Document viewer modal (may be moved to body by JS) — full viewport, stable stacking. */
.documents-viewer-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
}

/* Core Lexes: all header/banner backgrounds black (no blue) */
.card-header,
.clx-card-header,
.card .card-header,
.clx-card .clx-card-header,
.collapsible-box .card-header,
.billing-card-header,
.dashboard-box .card-header,
.clx-card.dashboard-box .clx-card-header {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: none !important;
  border-radius: 16px 16px 0 0;
  font-weight: 600;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  color: #ffffff !important;
  padding: 12px 16px;
  min-height: 48px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.card-header .text-muted {
  color: rgba(255, 255, 255, 0.85) !important;
  width: 100%;
  font-size: 12pt !important;
  font-weight: 400;
  margin-top: 2px;
}

.card-header .badge-soft {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.table {
  margin-bottom: 0;
}

.table th {
  font-size: 12pt !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.table tbody tr:hover {
  background: #eef4ff;
}

.badge-soft {
  background: #e5e5e5;
  color: #3f3f3f;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12pt !important;
}

.status-pill {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12pt !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #e5e5e5;
  color: #3f3f3f;
}

.status-open {
  background: #e7e7e7;
  color: #2a2a2a;
}

.status-active,
.status-in-progress {
  background: #e3e3e3;
  color: #3a3a3a;
}

.status-pending {
  background: #ededed;
  color: #4a4a4a;
}

.status-closed {
  background: #e4e4e4;
  color: #5a5a5a;
}

.status-cancelled,
.status-canceled {
  background: #e2e2e2;
  color: #5a5a5a;
}

.status-on-hold,
.status-on-hold-,
.status-on-hold-1 {
  background: #e6e6e6;
  color: #4a4a4a;
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  position: relative;
  background-image:
    linear-gradient(135deg, rgba(18, 18, 18, 0.78) 0%, rgba(18, 18, 18, 0.5) 35%, rgba(242, 242, 242, 0.7) 36%),
    url("/static/img/core-lexes-signin.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.auth-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 28px;
  width: min(360px, 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.auth-brand {
  font-weight: 700;
  font-size: 12pt !important;
  color: var(--brand-earth-deep);
  margin-bottom: 16px;
}

.auth-form {
  max-width: 320px;
  margin: 0 auto;
}

.auth-footer {
  margin-top: auto;
  padding: 14px 28px 22px;
  font-size: 12pt !important;
  color: var(--text-muted);
  text-align: center;
  width: 100%;
}

.text-muted {
  color: var(--text-muted) !important;
}

.list-group-item {
  border-color: var(--border);
}

.list-group-item:hover {
  background: #f3f3f3;
}

.link-muted {
  color: var(--text-muted);
  text-decoration: none;
}

.link-muted:hover {
  color: #5a5a54;
}

/* ========== CORE LEXES: ALL BUTTONS BLACK WITH WHITE TEXT (SITE-WIDE) ========== */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-dark,
.btn-light {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-info:focus,
.btn-warning:hover,
.btn-warning:focus,
.btn-danger:hover,
.btn-danger:focus,
.btn-dark:hover,
.btn-dark:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-light:hover,
.btn-light:focus {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.btn-black {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

.btn-black:hover,
.btn-black:focus {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #ffffff !important;
}

.btn-primary {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #ffffff !important;
}

.btn-outline-primary {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

.btn-outline-primary:hover {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #ffffff !important;
}

/* Global pill-style subtabs (Summary, Billing, Tasks, etc.) – match Bills page */
.subtab-pills,
.app-content .nav-pills,
.card .nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}

.subtab-pills .nav-link,
.app-content .nav-pills .nav-link,
.card .nav-pills .nav-link {
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12pt !important;
  font-weight: 600;
  color: #1f1f1f !important;
  background: #ffffff !important;
  border: 1px solid #d0d0d0 !important;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.subtab-pills .nav-link:hover,
.app-content .nav-pills .nav-link:hover,
.card .nav-pills .nav-link:hover {
  background: #e8edf4 !important;
  border-color: var(--brand-earth) !important;
  color: var(--brand-earth) !important;
}

.subtab-pills .nav-link.active,
.app-content .nav-pills .nav-link.active,
.card .nav-pills .nav-link.active {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 0 2px 8px rgba(20, 43, 82, 0.35);
}

.billing-toolbar .card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.billing-tabs-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 18px;
}

.billing-tabs-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}

.billing-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12pt !important;
  font-weight: 600;
  color: var(--brand-earth);
  background: linear-gradient(135deg, #edf4ff 0%, #ffffff 100%);
  border: 1px solid var(--border);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.16s ease;
}

.billing-tabs-inline .billing-tab {
  color: var(--brand-earth) !important;
  background: linear-gradient(135deg, #edf4ff 0%, #ffffff 100%) !important;
  border: 1px solid var(--border) !important;
  text-decoration: none !important;
}

.billing-tab.active,
.billing-tabs-inline .billing-tab.active {
  background: linear-gradient(135deg, var(--brand-earth) 0%, #1f4b87 100%);
  color: #ffffff !important;
  border-color: var(--brand-earth) !important;
  box-shadow: var(--glow);
}

.billing-tab:hover,
.billing-tabs-inline .billing-tab:hover {
  border-color: var(--brand-earth);
  transform: translateY(-1px);
}

.billing-tabs .nav-link.active {
  background: var(--brand-earth);
  color: #ffffff;
}

/* Bills subtab: status boxes (Drafted Pending Invoices, Unpaid, Paid) */
.bills-status-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bills-status-btn {
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12pt !important;
  font-weight: 600;
  color: #1f1f1f;
  background: #ffffff;
  border: 1px solid var(--border);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.bills-status-btn:hover {
  background: #e8edf4;
  border-color: var(--brand-earth);
  color: var(--brand-earth);
}
.bills-status-btn.active {
  background: #000000 !important;
  color: #ffffff;
  border-color: #000000;
  box-shadow: 0 2px 8px rgba(20, 43, 82, 0.35);
}
.bills-search-wrap {
  flex-shrink: 0;
}

.billing-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.billing-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.billing-summary--spaced {
  display: grid;
  margin-top: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.billing-summary--transactions {
  align-items: stretch;
}

.summary-item {
  background: #f7f7f7;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

.billing-actions {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #f9f9f9;
}

.billing-actions .form-check {
  margin-top: 6px;
}

.billing-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.empty-state {
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-muted);
}

.empty-state--spaced {
  margin-top: 18px;
}

.empty-state--separated {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.stat-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #e0e7f5;
  background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
}

.stat-label {
  font-size: 12pt !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.stat-value {
  font-size: 12pt !important;
  font-weight: 700;
  color: var(--brand-earth-deep);
}

a.stat-value {
  color: var(--brand-earth-deep);
}
a.stat-value:hover {
  color: var(--brand-earth);
  text-decoration: underline;
}

.calendar-day {
  min-width: 160px;
  background: #ffffff;
}

.calendar-grid {
  border-color: var(--border);
}

.calendar-grid th,
.calendar-grid td {
  border: 1px solid var(--border);
}

.calendar-grid td {
  min-height: 140px;
  height: 140px;
  vertical-align: top;
  padding: 8px;
}

.calendar-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

/* Month view density lock: fixed-width compact blocks like Microsoft month layout */
.month-view .calendar-day-events .calendar-entry {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #d8d2ee;
  border-radius: 4px;
  padding: 2px 4px;
  margin-bottom: 1px;
  background: #ede7ff;
  overflow: hidden;
}

.month-view .calendar-day-events .calendar-entry-title,
.month-view .calendar-day-events .calendar-entry-title .calendar-open-link {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  font-size: 9px !important;
  font-weight: 400;
  color: #2f2f2f !important;
  line-height: 1.1;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-decoration: none;
}

.month-view .calendar-day-events .calendar-inline-teams {
  float: right;
  font-size: 8px !important;
  color: #777 !important;
  margin-left: 4px;
  line-height: 1.1;
}

.month-view .calendar-day-events .calendar-day-more {
  font-size: 8px !important;
  color: #666 !important;
  line-height: 1.2;
  margin-top: 1px;
}

.month-view .calendar-day-events .calendar-entry-provider {
  font-size: 9px !important;
  color: #777 !important;
  line-height: 1.1;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.calendar-entry-meta-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 0;
}

.calendar-entry-meta {
  font-size: 12pt !important;
  color: var(--text-muted);
  line-height: 1.0;
}

.calendar-teams-badge {
  display: inline-block;
  padding: 0 4px;
  border-radius: 4px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12pt !important;
  line-height: 1.2;
  font-weight: 600;
}

.calendar-teams-join {
  font-size: 12pt !important;
  line-height: 1.0;
  color: #1d4ed8 !important;
  text-decoration: underline;
}

.calendar-entry-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.calendar-clickable-event {
  cursor: pointer;
}

.calendar-event {
  pointer-events: auto;
  cursor: pointer;
}

.calendar-header-month-year {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 14pt !important;
  font-weight: bold !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ========== Calendar expanded event type colors (distinct, at-a-glance) ========== */
.calendar-entry.calendar-event-type-COURT_EVENT,
.calendar-entry.calendar-event-type-COURT_HEARING,
.calendar-entry.calendar-event-type-TRIAL,
.calendar-entry.calendar-event-type-DEPOSITION,
.calendar-entry.calendar-event-type-DEADLINE,
.calendar-entry.calendar-event-type-CLIENT_MEETING,
.calendar-entry.calendar-event-type-CALL,
.calendar-entry.calendar-event-type-INTERNAL_MEETING,
.calendar-entry.calendar-event-type-MEETING,
.calendar-entry.calendar-event-type-TASK,
.calendar-entry.calendar-event-type-BILLING_REMINDER,
.calendar-entry.calendar-event-type-MEDIATION,
.calendar-entry.calendar-event-type-ARBITRATION,
.calendar-entry.calendar-event-type-SETTLEMENT_CONFERENCE,
.calendar-entry.calendar-event-type-MEDICAL_APPOINTMENT,
.calendar-entry.calendar-event-type-EXPERT_CONSULTATION,
.calendar-entry.calendar-event-type-DISCOVERY_CUTOFF,
.calendar-entry.calendar-event-type-FILING_DEADLINE,
.calendar-entry.calendar-event-type-SERVICE_DEADLINE,
.calendar-entry.calendar-event-type-MARKETING_NETWORKING,
.calendar-entry.calendar-event-type-PERSONAL,
.calendar-entry.calendar-event-type-AUTO_DEADLINE,
.calendar-entry.calendar-event-type-AUTO_DEADLINE_PI,
.calendar-entry.calendar-event-type-OTHER,
.list-group-item.calendar-event-type-COURT_EVENT,
.list-group-item.calendar-event-type-COURT_HEARING,
.list-group-item.calendar-event-type-TRIAL,
.list-group-item.calendar-event-type-DEPOSITION,
.list-group-item.calendar-event-type-DEADLINE,
.list-group-item.calendar-event-type-CLIENT_MEETING,
.list-group-item.calendar-event-type-CALL,
.list-group-item.calendar-event-type-INTERNAL_MEETING,
.list-group-item.calendar-event-type-MEETING,
.list-group-item.calendar-event-type-TASK,
.list-group-item.calendar-event-type-BILLING_REMINDER,
.list-group-item.calendar-event-type-MEDIATION,
.list-group-item.calendar-event-type-ARBITRATION,
.list-group-item.calendar-event-type-SETTLEMENT_CONFERENCE,
.list-group-item.calendar-event-type-MEDICAL_APPOINTMENT,
.list-group-item.calendar-event-type-EXPERT_CONSULTATION,
.list-group-item.calendar-event-type-DISCOVERY_CUTOFF,
.list-group-item.calendar-event-type-FILING_DEADLINE,
.list-group-item.calendar-event-type-SERVICE_DEADLINE,
.list-group-item.calendar-event-type-MARKETING_NETWORKING,
.list-group-item.calendar-event-type-PERSONAL,
.list-group-item.calendar-event-type-AUTO_DEADLINE,
.list-group-item.calendar-event-type-AUTO_DEADLINE_PI,
.list-group-item.calendar-event-type-OTHER {
  border-left-width: 4px;
  border-left-style: solid;
}
.calendar-entry.calendar-event-type-COURT_EVENT,
.list-group-item.calendar-event-type-COURT_EVENT { border-left-color: #DC143C; }
.calendar-entry.calendar-event-type-DEPOSITION,
.list-group-item.calendar-event-type-DEPOSITION { border-left-color: #CC5500; }
.calendar-entry.calendar-event-type-DEADLINE,
.list-group-item.calendar-event-type-DEADLINE { border-left-color: #800020; }
.calendar-entry.calendar-event-type-CLIENT_MEETING,
.list-group-item.calendar-event-type-CLIENT_MEETING { border-left-color: #4169E1; }
.calendar-entry.calendar-event-type-CALL,
.list-group-item.calendar-event-type-CALL { border-left-color: #00CED1; }
.calendar-entry.calendar-event-type-INTERNAL_MEETING,
.list-group-item.calendar-event-type-INTERNAL_MEETING { border-left-color: #708090; }
.calendar-entry.calendar-event-type-MEETING,
.list-group-item.calendar-event-type-MEETING { border-left-color: #4169E1; }
.calendar-entry.calendar-event-type-TASK,
.list-group-item.calendar-event-type-TASK { border-left-color: #EE82EE; }
.calendar-entry.calendar-event-type-BILLING_REMINDER,
.list-group-item.calendar-event-type-BILLING_REMINDER { border-left-color: #50C878; }
.calendar-entry.calendar-event-type-MEDIATION,
.list-group-item.calendar-event-type-MEDIATION { border-left-color: #FFD700; }
.calendar-entry.calendar-event-type-ARBITRATION,
.list-group-item.calendar-event-type-ARBITRATION { border-left-color: #4B0082; }
.calendar-entry.calendar-event-type-COURT_HEARING,
.list-group-item.calendar-event-type-COURT_HEARING { border-left-color: #002060; }
.calendar-entry.calendar-event-type-TRIAL,
.list-group-item.calendar-event-type-TRIAL { border-left-color: #002060; }
.calendar-entry.calendar-event-type-AUTO_DEADLINE,
.list-group-item.calendar-event-type-AUTO_DEADLINE { border-left-color: #ff8c00; }
.calendar-entry.calendar-event-type-AUTO_DEADLINE_PI,
.list-group-item.calendar-event-type-AUTO_DEADLINE_PI { border-left-color: #20b2aa; }
.calendar-entry.calendar-event-type-SETTLEMENT_CONFERENCE,
.list-group-item.calendar-event-type-SETTLEMENT_CONFERENCE { border-left-color: #B87333; }
.calendar-entry.calendar-event-type-MEDICAL_APPOINTMENT,
.list-group-item.calendar-event-type-MEDICAL_APPOINTMENT { border-left-color: #40E0D0; }
.calendar-entry.calendar-event-type-EXPERT_CONSULTATION,
.list-group-item.calendar-event-type-EXPERT_CONSULTATION { border-left-color: #FFBF00; }
.calendar-entry.calendar-event-type-DISCOVERY_CUTOFF,
.list-group-item.calendar-event-type-DISCOVERY_CUTOFF { border-left-color: #FF00FF; }
.calendar-entry.calendar-event-type-FILING_DEADLINE,
.list-group-item.calendar-event-type-FILING_DEADLINE { border-left-color: #0047AB; }
.calendar-entry.calendar-event-type-SERVICE_DEADLINE,
.list-group-item.calendar-event-type-SERVICE_DEADLINE { border-left-color: #CB4154; }
.calendar-entry.calendar-event-type-MARKETING_NETWORKING,
.list-group-item.calendar-event-type-MARKETING_NETWORKING { border-left-color: #FF7F50; }
.calendar-entry.calendar-event-type-PERSONAL,
.list-group-item.calendar-event-type-PERSONAL { border-left-color: #36454F; }
.calendar-entry.calendar-event-type-OTHER,
.list-group-item.calendar-event-type-OTHER { border-left-color: #6c757d; }

/* Global collapsible boxes: minimize/maximize for every card/panel (Core Lexes rule) */
.collapsible-box .card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  cursor: pointer;
}

.collapsible-box .collapsible-box-header-label {
  flex: 1;
  min-width: 0;
}

.collapsible-box-toggle {
  flex-shrink: 0;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0.2rem 0.35rem !important;
  border-radius: 0;
  cursor: pointer;
  font-size: 12pt !important;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

.collapsible-box-toggle:hover,
.collapsible-box-toggle:focus,
.collapsible-box-toggle:active {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.collapsible-box-icon {
  display: inline-block;
  transition: transform 0.15s ease;
}

.collapsible-box.collapsed .collapsible-box-icon {
  transform: rotate(-90deg);
}

/* Hide entire box content when collapsed (tables, forms, charts, all content) */
.collapsible-box.collapsed .collapsible-box-body {
  display: none !important;
}

.collapsible-box.collapsed .card-footer {
  display: none !important;
}

.collapsible-box.collapsed > *:not(.card-header) {
  display: none !important;
}

/* Dropdowns inside collapse: prevent overflow clipping that causes immediate close */
.collapse.show {
  overflow: visible !important;
}

/* Contacts index: name as primary link (Core Lexes style, not bright external) */
.contact-name-link {
  color: var(--brand-earth, #1c3d6f);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.contact-name-link:hover {
  color: var(--brand-earth-dark, #142b52);
  border-bottom-color: var(--brand-earth-dark, #142b52);
}

/* ========== Core Lexes collapsible cards (.clx-card) ========== */
/* One shared pattern: .clx-card, .clx-card-header, button.clx-caret, .clx-card-body. Default: collapsed. */
.clx-card {
  /* outer wrapper; use with .card for blue banner styling */
}

.clx-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.clx-card-header .clx-card-title {
  flex: 1;
  min-width: 0;
}

/* Caret button: must be type="button" so it does not submit forms. */
.clx-card-header .clx-caret,
.clx-card .clx-caret,
.clx-card button.clx-caret,
.card-header button.clx-caret,
.clx-card-header button.clx-caret,
button.btn-link.clx-caret,
button.btn.clx-caret,
.clx-card button.clx-caret,
.card-header button.clx-caret {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem !important;
  margin: 0 !important;
  min-width: 0 !important;
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.15s ease;
  text-decoration: none !important;
}

.clx-card-header .clx-caret:hover,
.clx-card-header .clx-caret:focus,
.clx-card .clx-caret:hover,
.clx-card .clx-caret:focus,
.clx-card button.clx-caret:hover,
.clx-card button.clx-caret:focus,
.card-header button.clx-caret:hover,
.card-header button.clx-caret:focus,
button.btn-link.clx-caret:hover,
button.btn-link.clx-caret:focus {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

/* Collapse state: body hidden when card has .is-collapsed. */
.clx-card.is-collapsed .clx-card-body,
#ssdi-intake-pane .clx-card.is-collapsed .clx-card-body {
  display: none !important;
}

.clx-card:not(.is-collapsed) .clx-card-body {
  display: block !important;
}

/* Caret rotation: right when collapsed, down when open. */
.clx-caret.is-open {
  transform: rotate(0deg);
}

.clx-caret:not(.is-open) {
  transform: rotate(-90deg);
}

.clx-card .clx-caret,
.clx-card .clx-caret path,
.clx-card-header .clx-caret,
.clx-card-header .clx-caret path,
.clx-card button.clx-caret,
.clx-card button.btn-link.clx-caret,
button.clx-caret,
#ssdi-intake-pane .clx-caret,
#ssdi-intake-pane button.clx-caret,
#ssdi-intake-pane .card-header .clx-caret {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* ── Caret group: keeps lock + caret together on the right ── */
.clx-caret-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* <details> + <summary>: ensure flex layout and hide native marker */
details.clx-card > summary.clx-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
  cursor: pointer;
}
details.clx-card > summary.clx-card-header::-webkit-details-marker {
  display: none !important;
}
details.clx-card > summary.clx-card-header::marker {
  display: none !important;
  content: "" !important;
}

/* ── Lock icon (next to caret) ── */
.clx-lock-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0.55;
  transition: opacity 0.15s ease;
  vertical-align: middle;
  line-height: 1;
}
.clx-lock-btn:hover,
.clx-lock-btn:focus {
  opacity: 1;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
}
.clx-lock-btn.is-locked {
  opacity: 1;
}
.clx-lock-btn .clx-lock-svg {
  display: block;
  stroke: #ffffff !important;
  fill: none !important;
}

/* Legacy .clx-box support: same layout so old pages still look right until migrated. */
.clx-box {
  /* outer wrapper */
}

.clx-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.clx-box-header .clx-box-title {
  flex: 1;
  min-width: 0;
}

.clx-box .clx-box-body {
  display: none !important;
}

.clx-box.is-expanded .clx-box-body {
  display: block !important;
}

/* ========== CARET ARROWS: ALWAYS WHITE. GLOBAL LOCK. DO NOT OVERRIDE. ========== */
/* Every collapsible box caret across the entire Core Lexes site must be white. */
.clx-caret,
.clx-caret path,
.clx-details-caret,
.clx-details-caret path,
span.clx-caret,
.clx-caret *,
.clx-details-caret *,
button .clx-caret,
.btn .clx-caret,
.card-header .clx-caret,
.card-header .clx-details-caret,
.card-header .btn .clx-caret,
.card-header .btn.workspace-toggle .clx-caret,
.workspace-dashboard .card-header .clx-caret,
.workspace-dashboard .card-header .btn .clx-caret,
svg.clx-caret,
svg.clx-details-caret,
.card-header .payment-methods-icon,
.card-header .summary-payment-icon,
.dashboard-box .clx-caret,
.dashboard-box .clx-caret path,
.clx-card.dashboard-box .clx-caret,
.clx-card.dashboard-box .clx-caret path,
.card-header button[aria-label*="Expand"] *,
.card-header button[aria-label*="Collapse"] *,
.card-header [aria-expanded] .clx-caret,
.card-header [aria-expanded] .payment-methods-icon,
.card-header [aria-expanded] .summary-payment-icon {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  border-color: #ffffff !important;
}

/* Collapse toggle buttons (Expand/Minimize): button and label must be white so carets stay white. */
.card-header .btn.workspace-toggle,
.card-header .clx-collapse-toggle,
.card-header .btn.workspace-toggle *,
.card-header .clx-collapse-toggle *,
.workspace-dashboard .card-header .btn.workspace-toggle,
.workspace-dashboard .card-header .btn.workspace-toggle *,
.workspace-dashboard .card-header .btn[aria-expanded] .clx-caret,
.card-header .btn-link,
.card-header .btn-link *,
.clx-card-header .btn-link,
.clx-card-header .btn-link *,
.clx-card .card-header button.clx-caret,
.clx-card .clx-card-header button.clx-caret {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

/* Remove btn-link underline that creates white line under caret (SSDI Intake, Notes, etc.) */
.clx-card button.btn-link.clx-caret,
.card-header button.btn-link.clx-caret,
#ssdi-intake-pane button.clx-caret,
#ssdi-intake-pane .clx-caret,
.clx-card button.clx-caret {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

/* SSDI Intake: ensure no underline in any state; header clickable */
#ssdi-intake-pane .card-header.clx-card-header,
#ssdi-intake-pane .clx-card-header {
  cursor: pointer;
}

#ssdi-intake-pane button.clx-caret,
#ssdi-intake-pane button.clx-caret:hover,
#ssdi-intake-pane button.clx-caret:focus,
#ssdi-intake-pane button.clx-caret:active {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Client portal: force black header and white carets on dashboard boxes */
.dashboard-box .card-header,
.clx-card.dashboard-box .clx-card-header {
  background: #000000 !important;
  color: #ffffff !important;
}

/* SUMMARY TAB (Details, Deadline Manager, Contacts, Conflict Checks, Timeline): Force white carets. Must override Bootstrap .btn. */
#summary-pane .card-header .clx-caret,
#summary-pane .card-header button.workspace-toggle,
#summary-pane .card-header button.workspace-toggle .clx-caret,
#summary-pane .card-header button.workspace-toggle *,
#summary-pane .card-header .btn .clx-caret,
.matter-tabs-card #summary-pane .card-header .clx-caret,
.matter-tabs-card #summary-pane .card-header button.workspace-toggle,
.matter-tabs-card #summary-pane .card-header button.workspace-toggle .clx-caret,
.matter-tabs-card #summary-pane .card-header button.workspace-toggle *,
.matter-tabs-card .card-header .clx-caret,
.matter-tabs-card .card-header button.workspace-toggle .clx-caret,
.matter-tabs-card .card-header button.workspace-toggle * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
}

/* Global caret behavior: display, transition, rotation for Bootstrap collapse and all card headers */
.clx-caret {
  display: inline-block;
  transition: transform 0.15s ease;
}

/* Collapsed state: caret points right. Applies to Bootstrap collapse, workspace, Contacts, etc. */
button[aria-expanded="false"] .clx-caret,
.btn[aria-expanded="false"] .clx-caret,
button.clx-caret[aria-expanded="false"],
.btn.clx-caret[aria-expanded="false"] {
  transform: rotate(-90deg);
}

/* Expanded state: caret points down. When button itself is the caret (SSDI Intake, etc.) or when .clx-caret is inside button */
button[aria-expanded="true"] .clx-caret,
.btn[aria-expanded="true"] .clx-caret,
button.clx-caret[aria-expanded="true"],
.btn.clx-caret[aria-expanded="true"] {
  transform: rotate(0deg);
}

/* ========== Matter Tasks: blue banner and urgent indicators ========== */
.matter-tasks-banner {
  background: #000000 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #000000;
}

.task-urgent-badge-matter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c00;
  font-weight: bold;
  font-size: 0.95rem;
  margin-right: 0.25rem;
  min-width: 1.2em;
}

.task-row-urgent-matter {
  background-color: rgba(204, 0, 0, 0.06);
}

.task-urgent-indicator-workspace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  width: 28px;
  height: 28px;
  margin-right: 0.5rem;
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #c00;
  background-color: rgba(204, 0, 0, 0.12);
  border-radius: 4px;
}

.task-row-urgent-workspace {
  border-left: 4px solid #c00;
  background-color: rgba(204, 0, 0, 0.06);
}

.task-row-urgent-workspace:hover {
  background-color: rgba(204, 0, 0, 0.1);
}

/* ========== Assign a Task card (Tasks subtab) ========== */
/* Tasks pane: allow dropdown to extend without clipping */
#tasks-pane {
  overflow: visible !important;
}
/* Assign a Task card stacks above Tasks Completed / Tasks Assigned so dropdown overlays them */
.assign-task-card {
  position: relative;
  z-index: 10;
  overflow: visible !important;
}
.assign-task-card .card-header.assign-task-banner {
  background: #000000 !important;
  color: #ffffff !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}

/* Tasks subtab (1M): Assign a Task, Tasks Assigned, Tasks Completed — same thin black banner height */
#tasks-pane .assign-task-card > .card-header.assign-task-banner,
#tasks-pane .matter-tasks-box > .card-header.clx-card-header {
  padding: 4px 8px !important;
  min-height: 22px !important;
  line-height: 1.1 !important;
  border-radius: 0 !important;
  align-items: center !important;
}
#tasks-pane .matter-tasks-box > .card-header .clx-card-title {
  line-height: 1.1 !important;
}
#tasks-pane .matter-tasks-box > .card-header button.clx-caret,
#tasks-pane .matter-tasks-box > .card-header #tasks-bulk-delete-btn {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.1 !important;
  min-height: 0 !important;
}
#tasks-pane .matter-tasks-box > .card-header #tasks-bulk-delete-btn {
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-size: 10pt !important;
}

/* Documents subtab (1N): Client Documents banner matches Summary thin header (only clx-card here with a .card-header is client documents; e-sign card has no header). */
#documents-pane .clx-card.card > .card-header.clx-card-header {
  padding: 4px 8px !important;
  min-height: 22px !important;
  line-height: 1.1 !important;
  border-radius: 0 !important;
  align-items: center !important;
}
#documents-pane .clx-card.card > .card-header.clx-card-header .clx-card-title {
  line-height: 1.1 !important;
}
#documents-pane .clx-card.card > .card-header.clx-card-header button.clx-caret {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.1 !important;
  min-height: 0 !important;
}

.assign-task-card .card-body {
  background: #ffffff;
  padding: 0.65rem 0.85rem;
  overflow: visible !important;
}
.assign-task-card #assign-task-form .form-label {
  margin-bottom: 0.2rem;
}
.assign-task-card #assign-task-form .assign-task-row {
  --bs-gutter-y: 0.35rem;
}
.assign-task-card #assign-task-form .assign-task-actions-col .form-label {
  visibility: hidden;
}
.assign-task-card #assign-task-form .assign-task-actions-row {
  min-height: calc(1.5em + 0.75rem + 2px);
  white-space: nowrap;
}
.assign-task-card #assign-task-form .assign-task-actions-row .form-check {
  display: inline-flex;
  align-items: center;
}
.assign-task-card #assign-task-form .assign-task-actions-row .btn {
  margin-left: 0.15rem;
}

/* Custom Task type dropdown: trigger and panel inside dropdown */
.assign-task-type-trigger {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  padding: 0.375rem 0.75rem;
  height: calc(1.5em + 0.75rem + 2px);
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background-color: #fff;
  color: #212529;
  cursor: pointer;
}
.assign-task-type-trigger:hover {
  border-color: #1c3d6f;
}
.assign-task-type-trigger-caret {
  font-size: 8pt;
  opacity: 0.7;
}
.assign-task-type-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 100%;
  width: 100%;
  margin-top: 2px;
  z-index: 1060;
  background: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  box-sizing: border-box;
  isolation: isolate;
}
.assign-task-type-wrap {
  min-width: 0;
}

/* Due date field: shorter width so it does not take excess horizontal space */
.assign-task-due-col input[name="due_by"] {
  max-width: 12rem;
}
.assign-task-type-panel-inner {
  max-height: 280px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.assign-task-type-panel .assign-task-type-search {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  width: 100%;
  box-sizing: border-box;
}
.assign-task-type-list {
  overflow-y: auto;
  max-height: 160px;
  padding: 4px 0;
  min-width: 0;
}
.assign-task-type-option {
  display: block;
  padding: 6px 12px;
  border: none;
  background: transparent;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  color: #212529;
  cursor: pointer;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}
.assign-task-type-option:hover {
  background: rgba(28, 61, 111, 0.08);
  color: #1c3d6f;
}
.assign-task-type-add-row {
  background: #f8f9fa;
  border-top: 1px solid #dee2e6 !important;
}
.assign-task-type-add-row .form-control,
.assign-task-type-add-row .btn {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}
.assign-task-type-add-row .form-control {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}

/* ========== Task Done: large green checkmark (Task Assignments of the Day + Matter Tasks Assigned) ========== */
.task-done-checkmark {
  display: inline-block;
  font-size: 1.4em;
  font-weight: bold;
  color: #0d7d0d;
  line-height: 1;
  vertical-align: middle;
}

/* ========== Documents subtab: drag-and-drop upload ========== */
#documents-pane {
  position: relative;
}

.documents-drop-zone {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 61, 111, 0.92);
  border: 3px dashed var(--border, #d0d0d0);
  border-radius: 8px;
  pointer-events: none;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}

.documents-drop-zone-label {
  color: #fff;
  font-weight: 600;
}

.documents-upload-progress {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}

.documents-upload-row .documents-upload-name {
  margin-right: 0.5rem;
}

.documents-folder-row.documents-drop-highlight,
.documents-drop-root.documents-drop-highlight {
  background-color: rgba(53, 192, 255, 0.2) !important;
  outline: 2px solid var(--brand-accent, #35c0ff);
  outline-offset: -2px;
}

.documents-doc-row[draggable="true"] {
  cursor: move;
}

.documents-folder-row {
  cursor: pointer;
}

.documents-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.documents-thumb-fallback {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  line-height: 1;
}

/* Persistent drag-and-drop upload zone */
.documents-dnd-zone {
  border: 2px dashed #b0c4de;
  border-radius: 8px;
  padding: 1.25rem 1rem;
  text-align: center;
  background: #f8fafd;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  position: relative;
}

.documents-dnd-zone:hover {
  border-color: #6aa3d5;
  background: #eef4fb;
}

.documents-dnd-zone.dnd-active {
  border-color: #1c3d6f;
  background: rgba(28, 61, 111, 0.08);
  box-shadow: 0 0 0 3px rgba(28, 61, 111, 0.15);
}

.documents-dnd-zone-icon {
  font-size: 24pt;
  display: block;
  margin-bottom: 0.3rem;
  color: #6aa3d5;
  pointer-events: none;
}

.documents-dnd-zone-text {
  color: #555;
  pointer-events: none;
}

.documents-dnd-zone-text strong {
  color: #1c3d6f;
}

.documents-dnd-zone-buttons {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Per-file progress bars */
.documents-upload-file-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}

.documents-upload-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-upload-file-bar {
  width: 120px;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.documents-upload-file-bar-inner {
  height: 100%;
  background: #1c3d6f;
  border-radius: 3px;
  transition: width 0.15s;
  width: 0%;
}

.documents-upload-file-status {
  width: 70px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 600;
}

/* ========== Documents folder pop-out panel ========== */
.documents-folder-popout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}

.documents-folder-popout-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.documents-folder-popout-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--surface, #fff);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.documents-folder-popout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--brand-earth, #1c3d6f);
  color: #fff;
  flex-shrink: 0;
}

.documents-folder-popout-title {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  color: #fff;
  font-weight: 600;
}

.documents-folder-popout-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
  opacity: 0.9;
}

.documents-folder-popout-close:hover {
  opacity: 1;
}

.documents-folder-popout-body {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
}

.documents-folder-popout-dropzone {
  border: 2px dashed var(--border, #d0d0d0);
  border-radius: 6px;
  padding: 1rem;
  text-align: center;
  background: var(--surface-muted, #f5f7fb);
  transition: background 0.15s, border-color 0.15s;
}

.documents-folder-popout-dropzone-label {
  color: var(--text-muted, #707070);
}

.documents-folder-popout-dropzone.documents-folder-popout-dropzone-active {
  background: rgba(53, 192, 255, 0.12);
  border-color: var(--brand-accent, #35c0ff);
}

.documents-folder-popout-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.documents-folder-popout-list .list-group-item a {
  color: var(--brand-earth, #1c3d6f);
  text-decoration: none;
}

.documents-folder-popout-list .list-group-item a:hover {
  text-decoration: underline;
}

.documents-folder-popout-back-link {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}
.documents-folder-popout-back-link-a {
  color: var(--brand-earth, #1c3d6f);
  text-decoration: none;
}
.documents-folder-popout-back-link-a:hover {
  text-decoration: underline;
}

.notes-scroll-box {
  max-height: 420px;
  overflow-y: auto;
}

/* ========== Integrations module: logo icon display ========== */
.integration-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.integration-icon img,
.integration-icon svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.integration-icon-fallback {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted, #f5f7fb);
  border-radius: 6px;
  font-size: 20px;
  color: var(--text-muted, #707070);
}
.integration-icon.integration-icon-lg {
  width: 80px;
  height: 80px;
}
.integration-icon.integration-icon-lg .integration-icon-fallback {
  width: 80px;
  height: 80px;
  font-size: 32px;
}

/* OAuth Integrations framework: logo container */
.integration-logo-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--surface-muted, #f5f7fb);
  border-radius: 8px;
}
.integration-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.integration-logo-wrapper.integration-logo-wrapper-lg {
  width: 96px;
  height: 96px;
}

/* Add to matter contacts modal: prevent backdrop flashing and ensure modal is clickable (moved to body by JS) */
#summary-contacts-add-modal.modal {
  z-index: 1060 !important;
}
#summary-contacts-add-modal .modal-dialog {
  z-index: 1061 !important;
  position: relative;
}
#summary-contacts-add-modal .modal-content {
  pointer-events: auto !important;
}

/* SUMMARY PENCIL ICONS: black pencil, white background. Must override any .card/.btn-link rules. */
button.summary-detail-edit,
button.summary-contact-edit,
button.summary-adverse-edit,
a.summary-contact-edit {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}
button.summary-detail-edit:hover:not(:disabled),
button.summary-contact-edit:hover:not(:disabled),
button.summary-adverse-edit:hover:not(:disabled),
a.summary-contact-edit:hover {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}
.summary-pencil-icon {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: transparent !important;
}

/* ── Contacts box: section headers ── */
.clx-contacts-section-hdr {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
  font-weight: bold !important;
  color: #fff !important;
  background: #000 !important;
  margin-top: 6px;
  margin-bottom: 4px;
  padding: 4px 8px;
  border-radius: 2px;
}

.summary-contact-select-wrap {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

.summary-contact-select-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* ── Click-to-call Dialpad links ── */
.clx-tel-link {
  color: #0d6efd !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.clx-tel-link:hover {
  color: #0a58ca !important;
  text-decoration: underline !important;
}
.clx-tel-link svg {
  color: #0d6efd !important;
}
.clx-tel-link:hover svg {
  color: #0a58ca !important;
}

/* ── Court interactive link ── */
.clx-court-link {
  color: #000 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}
.clx-court-link:hover {
  color: #0d6efd !important;
}

/* ── Court popover ── */
.clx-court-popover {
  position: absolute;
  z-index: 1070;
  background: #fff;
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  padding: 12px 16px;
  max-width: 360px;
  min-width: 220px;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12pt !important;
}
.clx-court-popover-name {
  font-weight: bold !important;
  font-size: 12pt !important;
  margin-bottom: 6px;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}
.clx-court-popover-row {
  margin-bottom: 3px;
  font-size: 12pt !important;
}
.clx-court-popover-row a {
  color: #0d6efd !important;
  text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Sprint 8 — Hardening: Unified Intelligence Module Styles
   PI + SSDI/SSI subtabs + Executive Dashboard ONLY
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Severity color standardization ── */
.clx-sev-info    { background: #6c757d !important; color: #fff !important; }
.clx-sev-warning { background: #fd7e14 !important; color: #fff !important; }
.clx-sev-critical{ background: #dc3545 !important; color: #fff !important; }

/* ── Uniform rounded badges ── */
.clx-intel-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 10pt;
  font-weight: bold;
  font-family: "Times New Roman", Times, serif;
  white-space: nowrap;
  vertical-align: middle;
}
.clx-intel-badge.badge-high-value     { background: #198754; color: #fff; }
.clx-intel-badge.badge-low-roi        { background: #dc3545; color: #fff; }
.clx-intel-badge.badge-erisa          { background: #6f42c1; color: #fff; }
.clx-intel-badge.badge-medicare       { background: #0d6efd; color: #fff; }
.clx-intel-badge.badge-medicaid       { background: #0dcaf0; color: #000; }
.clx-intel-badge.badge-treatment-gap  { background: #ffc107; color: #000; }
.clx-intel-badge.badge-inactivity     { background: #dc3545; color: #fff; }
.clx-intel-badge.badge-neg-health     { border-radius: 50%; width: 14px; height: 14px; padding: 0; }
.clx-intel-badge.badge-neg-green      { background: #198754; }
.clx-intel-badge.badge-neg-yellow     { background: #ffc107; }
.clx-intel-badge.badge-neg-red        { background: #dc3545; }

/* ── Consistent intelligence section header ── */
.clx-intel-section-hdr {
  background: #000 !important;
  color: #fff !important;
  padding: 8px 14px !important;
  font-weight: bold !important;
  font-size: 12pt !important;
  font-family: "Times New Roman", Times, serif !important;
  border-radius: 4px 4px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.clx-intel-section-hdr .clx-intel-subtext {
  font-weight: normal;
  font-size: 10pt;
  color: #ccc;
  margin-left: 12px;
}
.clx-intel-section-hdr .clx-intel-hdr-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Loading spinner for intelligence modules ── */
.clx-intel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: #666;
  font-style: italic;
}
.clx-intel-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #ddd;
  border-top-color: #000;
  border-radius: 50%;
  animation: clxSpin 0.7s linear infinite;
  margin-right: 10px;
}
@keyframes clxSpin {
  to { transform: rotate(360deg); }
}

/* ── Responsive table wrapper ── */
.clx-intel-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.clx-intel-table-wrap table {
  min-width: 600px;
}

/* ── Mobile / tablet adjustments for intelligence modules ── */
@media (max-width: 992px) {
  .ci-kv-label { min-width: 140px; }
  .ci-score-ring { width: 56px; height: 56px; font-size: 18pt; }
  .rd-stats-row { gap: 10px; }
  .rd-stat-card { min-width: 110px; padding: 8px 10px; }
  .eid-kpi { min-width: 130px; }
  .eid-pipeline-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
  .neg-analytics-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
}
@media (max-width: 768px) {
  .ci-section-body { padding: 10px; }
  .rd-section-body { padding: 10px; }
  .rd-field-row { flex-direction: column; }
  .rd-milestone-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .eid-filters { flex-direction: column !important; }
  .eid-kpi { min-width: 100%; }
  .neg-edit-modal { width: 96vw !important; }
  .ci-gap-table th:nth-child(4), .ci-gap-table td:nth-child(4) { display: none; }
}
@media (max-width: 576px) {
  .clx-intel-section-hdr { flex-direction: column; align-items: flex-start; gap: 4px; }
  .clx-intel-section-hdr .clx-intel-hdr-actions { width: 100%; justify-content: flex-end; }
  .eid-tbl th, .eid-tbl td { font-size: 10pt !important; padding: 4px 6px !important; }
}

.customer-service {
  position: relative;
  list-style: none;
  margin-top: auto;
}

.customer-service-popout {
  display: none;
  position: absolute;
  left: 100%;
  bottom: 0;
  width: 220px;
  background: #111;
  border: 1px solid #333;
  padding: 10px;
  z-index: 1000;
}

.customer-service-popout.open {
  display: block;
}

.customer-service-option {
  display: block;
  padding: 8px 10px;
  color: #fff;
  text-decoration: none;
  font-size: 12pt !important;
}

.customer-service-option:hover {
  background: #222;
}

#tawkchat-container,
#tawkchat-status-icon,
.tawk-min-container,
.tawk-button-circle,
.tawk-status-icon {
  display: none !important;
}

.support-ticket-display {
  font-size: 12pt !important;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid #333;
  color: #f2f2f2;
}

#support-ticket-id {
  font-weight: 600;
  color: #e6c07b;
}

.support-chat-launcher {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.support-chat-text {
  font-size: 12pt !important;
  color: #8fd0e8;
  font-weight: 600;
}

.support-chat-bubble {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.chat-icon {
  font-size: 12pt !important;
  color: #fff;
}

.chat-notification {
  position: absolute;
  top: -3px;
  right: -3px;
  background: red;
  color: #fff;
  font-size: 10pt !important;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bills-initials-badge.wip-user-initials {
  font-size: 10px !important;
  line-height: 10px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.wip-row td {
  padding: 4px 6px;
}

.wip-table tbody tr td {
    border-bottom: 1px solid #d9d9d9;
}

.wip-table td:first-child {
    border-right: none;
}

.wip-table td:nth-child(2),
.wip-table th:nth-child(2) {
    border-right: none;
}

.wip-scroll-container {
  max-height: 420px;
  overflow-y: auto;
}

.wip-editor-grid {
    display: grid;
    grid-template-columns: 110px 1fr 70px 80px 90px;
    grid-template-rows: auto auto;
    gap: 0px 6px;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
}

.wip-label {
    font-size: 9px !important;
    line-height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wip-field input {
    height: 20px;
    padding: 0px 3px;
    width: 100%;
}

.wip-table tbody tr {
border-bottom: 1px solid #d9d9d9 !important;
}

.wip-table tbody tr td {
border-bottom: 1px solid #d9d9d9 !important;
}

.wip-table td:first-child {
border-right: none !important;
}

.wip-table td:nth-child(2),
.wip-table th:nth-child(2) {
border-right: none !important;
}

.bills-table tbody tr {
border-bottom: 1px solid #d9d9d9 !important;
}

.bills-table tbody tr td {
border-bottom: 1px solid #d9d9d9 !important;
}

.wip-scroll-container .wip-table {
width: 100% !important;
min-width: 100% !important;
border-collapse: collapse !important;
table-layout: auto !important;
}

.wip-table thead th,
.wip-table tbody td {
padding: 8px 10px !important;
vertical-align: middle !important;
}

.wip-table thead th:nth-child(4),
.wip-table tbody td:nth-child(4) {
white-space: normal;
}

.wip-table th.bills-cell-initials,
.wip-table td.bills-cell-initials {
text-align: center !important;
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

.wip-table tbody td.bills-cell-initials {
display: table-cell !important;
vertical-align: middle !important;
}

.wip-table td.bills-cell-initials .bills-initials-badge {
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
line-height: 1 !important;
margin: 0 auto !important;
}

.wip-table td.bills-cell-initials .status-sub {
width: 100%;
text-align: center !important;
}

.wip-table tbody td.bills-cell-initials {
border-bottom: none !important;
}