/* Wave look-alike: deep navy sidebar, white canvas, blue pill buttons, status pills. */
.wave { display: flex; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 12px; color: #1c2230; }
.wave-side { flex: none; width: 124px; background: #001C64; color: #dfe6ff; padding: 10px 6px; display: flex; flex-direction: column; gap: 2px; }
.wave-biz { display: flex; align-items: center; gap: 4px; padding: 4px 6px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.12); }
.wave-biz-name { font-weight: 700; color: #fff; font-size: 12px; line-height: 1.2; }
.wave-caret { color: #9fb1e8; }
.wave-side nav { display: flex; flex-direction: column; gap: 1px; }
.wave-nav { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 6px; font-size: 11.5px; white-space: nowrap; }
.wave-nav .ico { width: 13px; height: 13px; color: #9fb1e8; }
.wave-nav.open { color: #fff; font-weight: 600; }
.wave-sub { display: block; width: 100%; text-align: left; padding: 4px 6px 4px 26px; border: 0; border-radius: 6px; background: none;
  color: #c4cff5; font-size: 11.5px; cursor: pointer; }
.wave-sub:hover { background: rgba(255,255,255,.08); }
.wave-sub.on { background: #1c3d8f; color: #fff; font-weight: 600; }

.wave-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px 14px 8px; background: #fff; }
.wave-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wave-top h2 { margin: 0; font-size: 18px; font-weight: 700; color: #1c2230; margin-right: auto; }
.wave-btn { padding: 5px 12px; border-radius: 999px; background: #1c4fd8; color: #fff; font-weight: 600; white-space: nowrap; }
.wave-tabs { display: flex; gap: 14px; border-bottom: 1px solid #e3e7ef; margin-bottom: 4px; }
.wave-tab { padding: 4px 0 6px; border: 0; background: none; color: #4f5a70; cursor: pointer; border-bottom: 2px solid transparent; }
.wave-tab.on { color: #1c4fd8; font-weight: 600; border-bottom-color: #1c4fd8; }
.wave-table { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wave-rows { flex: 1; min-height: 0; }
.wave-row { display: grid; align-items: center; gap: 8px; padding: 6px 4px; border-top: 1px solid #edf0f5; cursor: pointer; }
.cust .wave-row { grid-template-columns: 1.6fr 1fr 70px; }
.inv .wave-row { grid-template-columns: 70px 1fr 74px; }
.wave-row:hover { background: #f5f8fe; }
.wave-row.sel { background: #eaf0fd; }
.wave-th { border-top: 0; font-weight: 700; color: #4f5a70; cursor: default; font-size: 11px; }
.wave-th:hover { background: none; }
.wave-row > span { min-width: 0; }
.wave-row small { display: block; color: #6c778c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wave-link { color: #1c4fd8; font-weight: 600; }
.wave-phone { font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 3px; margin-left: -3px; }
.wave-num { text-align: right; font-variant-numeric: tabular-nums; }
.wave-pill { display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.p-paid { background: #dff5e4; color: #1d7a3d; }
.p-unpaid { background: #fff1c7; color: #7a5600; }
.p-overdue { background: #fde0de; color: #b02a22; }
.p-draft { background: #e8ebf1; color: #4f5a70; }
.wave-foot { padding: 8px 4px; color: #6c778c; border-top: 1px solid #edf0f5; }

@container (max-width: 400px) {
  .wave-side { width: 92px; }
  .wave-nav { font-size: 10.5px; gap: 5px; white-space: normal; line-height: 1.15; }
  .wave-biz-name { font-size: 11px; }
  .wave-sub { padding-left: 14px; font-size: 11px; }
  .wave-main { padding: 10px; }
  .wave-top h2 { font-size: 16px; }
  .wave-btn { padding: 4px 9px; font-size: 11px; }
  .cust .wave-row { grid-template-columns: 1fr 96px; }
  .cust .wave-row > .wave-num { display: none; }
}