/* app-v0.14.0 customer list + Export/Download panel (Components/CustomerListPanel.razor). Plain CSS so it reads the same on
   MudBlazor owner tools, Zelki's admin and Business Hub. Text colours meet WCAG AA on the white panel. */
.cx-panel { background: #fff; color: #1f2328; border: 1px solid #d0d7de; border-radius: 12px; padding: 16px; font-size: .95rem; }
.cx-panel a { color: #0b5cad; text-decoration: underline; text-underline-offset: 2px; }
.cx-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.cx-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.cx-search { flex: 1 1 260px; }
.cx-label { font-size: .8rem; font-weight: 600; color: #3d444d; }
.cx-input { font: inherit; color: #1f2328; background: #fff; border: 1px solid #8c959f; border-radius: 8px; padding: 8px 10px; min-height: 40px; width: 100%; box-sizing: border-box; }
.cx-input:focus-visible { outline: 3px solid #0b5cad55; border-color: #0b5cad; }
.cx-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; color: #1f2328; cursor: pointer; }
.cx-check input { width: 18px; height: 18px; accent-color: #0b5cad; }
.cx-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.cx-status { margin: 0; color: #1f2328; }
.cx-muted { color: #57606a; }
.cx-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-btn { font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 8px; border: 1px solid #0b5cad; background: #fff; color: #0b5cad; cursor: pointer; }
.cx-btn:hover:not([disabled]) { background: #eef5fc; }
.cx-btn-primary { background: #0b5cad; color: #fff; }
.cx-btn-primary:hover:not([disabled]) { background: #094a8c; }
.cx-btn[disabled] { opacity: .55; cursor: not-allowed; }
.cx-btn:focus-visible { outline: 3px solid #0b5cad66; outline-offset: 2px; }
.cx-note { margin: 8px 0 0; font-size: .82rem; color: #57606a; }
.cx-flash { margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.cx-flash-ok { background: #e6f4ea; color: #1a5d2b; border: 1px solid #a8d5b5; }
.cx-flash-err { background: #fdecea; color: #8a1c12; border: 1px solid #f1b0a8; }
.cx-empty { margin-top: 14px; padding: 18px; text-align: center; color: #57606a; border: 1px dashed #d0d7de; border-radius: 8px; }
.cx-table-wrap { margin-top: 14px; overflow-x: auto; }
.cx-table { width: 100%; border-collapse: collapse; }
.cx-table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #3d444d; border-bottom: 2px solid #d0d7de; padding: 8px; white-space: nowrap; }
.cx-table td { border-bottom: 1px solid #eaeef2; padding: 8px; vertical-align: top; color: #1f2328; }
.cx-table .cx-num { text-align: right; white-space: nowrap; }
.cx-table tr.cx-click { cursor: pointer; }
.cx-table tr.cx-click:hover td { background: #f6f8fa; }
.cx-table tr.cx-archived td { color: #57606a; }
.cx-email { word-break: break-all; }
.cx-chip { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #eef5fc; color: #0b4a8a; border: 1px solid #b6d3f2; white-space: nowrap; }
.cx-chip-gray { background: #f0f1f3; color: #3d444d; border-color: #d0d7de; margin-left: 6px; }
@media (max-width: 720px) {
  .cx-panel { padding: 12px; }
  .cx-field { min-width: 0; flex: 1 1 45%; }
  .cx-search { flex-basis: 100%; }
  .cx-buttons { width: 100%; }
  .cx-btn { flex: 1 1 auto; justify-content: center; }
  .cx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cx-table, .cx-table tbody, .cx-table tr, .cx-table td { display: block; width: 100%; box-sizing: border-box; }
  .cx-table tr { border: 1px solid #d0d7de; border-radius: 10px; margin-bottom: 10px; padding: 6px 4px; }
  .cx-table td { border: 0; padding: 4px 8px; display: flex; gap: 10px; }
  .cx-table td::before { content: attr(data-label); flex: 0 0 96px; font-size: .78rem; font-weight: 700; color: #3d444d; }
  .cx-table .cx-num { text-align: left; }
  .cx-table td.cx-name { font-size: 1.02rem; }
  .cx-table td.cx-name::before { display: none; }
}