/* ============================================================
   ACCOUNTS RECEIVABLE — styles
   Every selector is `ar-` prefixed. The CRM already owns .btn,
   .card, .badge, .modal-overlay, .field — none of those may be
   reused here or the two stylesheets fight.
   Sizing follows the CRM: html{font-size:10px}, so 1.4rem = 14px.
   ============================================================ */

.ar-head { display:flex; align-items:center; gap:1.6rem; margin-bottom:2rem; }
.ar-head h1 { font-size:2.3rem; font-weight:650; letter-spacing:-.02em; margin:0; color:#182550; }
.ar-sub { color:#5b6170; font-size:1.4rem; margin-top:.4rem; }

/* ---------- filter bar ---------- */
.ar-filters {
  display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
  background:#fff; border:1px solid #e7e9ee; border-radius:8px;
  padding:1.2rem 1.8rem; box-shadow:0 1px 2px rgba(24,37,80,.06);
}
.ar-search { position:relative; width:28rem; }
.ar-search span { position:absolute; left:1.2rem; top:50%; transform:translateY(-50%); color:#767c8b; font-size:1.3rem; pointer-events:none; }
.ar-search input {
  width:100%; padding:.7rem 1.2rem .7rem 3rem; border:1px solid #d5d8e0; border-radius:20px;
  font:inherit; font-size:1.35rem; background:#fafafa; color:#182550;
}
.ar-search input:focus { outline:2px solid #e4e8f2; border-color:#182550; background:#fff; }
.ar-mini { padding:.6rem 1rem; border:1px solid #d5d8e0; border-radius:6px; font:inherit; font-size:1.35rem; background:#fff; color:#182550; }
.ar-count { margin-left:auto; color:#3f4557; font-size:1.35rem; font-weight:600; }

.ar-callout {
  background:#fdf3e6; border:1px solid #f3e0c3; border-left:4px solid #d9a441; border-radius:8px;
  padding:1.2rem 1.6rem; margin-bottom:1.4rem; font-size:1.35rem; color:#96601a; line-height:1.55;
}
.ar-callout b { color:#7a4e15; }
.ar-callout-list { margin:.8rem 0 0; padding-left:1.8rem; }
.ar-callout-list li { margin-bottom:.4rem; }
.ar-callout-list li:last-child { margin-bottom:0; }
.ar-callout-list a { color:#7a4e15; font-weight:700; }
.ar-callout-foot { margin-top:.8rem; font-size:1.25rem; opacity:.85; }

@keyframes ar-flash {
  0%   { box-shadow:0 0 0 3px rgba(241,120,36,.55); }
  100% { box-shadow:0 0 0 3px rgba(241,120,36,0); }
}
.ar-card.ar-flash { animation:ar-flash 1.6s ease-out; }

.ar-empty-action { margin-top:2rem; padding-top:2rem; border-top:1px solid #e7e9ee; }
.ar-empty-action p { font-size:1.35rem; color:#5b6170; max-width:52rem; margin:0 auto 1.6rem; line-height:1.6; }

.ar-empty { padding:4.8rem; text-align:center; color:#5b6170; background:#fff; border:1px solid #e7e9ee; border-radius:8px; margin-top:1.4rem; font-size:1.5rem; }

/* ---------- cards ---------- */
.ar-cards { display:flex; flex-direction:column; gap:1.4rem; margin-top:1.4rem; }
.ar-card {
  background:#fff; border:1px solid #e7e9ee; border-left:4px solid #d5d8e0;
  border-radius:8px; box-shadow:0 1px 2px rgba(24,37,80,.06), 0 4px 12px rgba(24,37,80,.06); overflow:hidden;
}
.ar-card.ar-s-overdue  { border-left-color:#F17824; }
.ar-card.ar-s-awaiting { border-left-color:#182550; }
.ar-card.ar-s-needsinv { border-left-color:#d9a441; }
.ar-card.ar-s-paid     { border-left-color:#1f7a52; }

.ar-card-head { display:flex; align-items:center; gap:1.2rem; padding:1.3rem 1.8rem; border-bottom:1px solid #e7e9ee; background:#fafafa; flex-wrap:wrap; }
.ar-ono { font-size:1.75rem; font-weight:700; font-variant-numeric:tabular-nums; color:#182550; }
.ar-oco { font-size:1.75rem; font-weight:600; color:#182550; }
.ar-operson { color:#3f4557; font-size:1.4rem; font-weight:500; }
.ar-amt { margin-left:auto; font-size:2.1rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; color:#182550; }
.ar-amt small { display:block; font-size:1.25rem; font-weight:500; color:#3f4557; text-align:right; }

/* 1px gap over a gray backdrop draws the column rules — survives any reflow */
.ar-grid { display:grid; gap:1px; background:#e7e9ee; grid-template-columns:repeat(5, minmax(0,1fr)); }
.ar-col { padding:1.5rem 1.8rem; min-width:0; background:#fff; }
.ar-label {
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; min-height:2.4rem;
  font-size:1.2rem; text-transform:uppercase; letter-spacing:.07em; color:#182550; font-weight:700; margin-bottom:1.2rem;
}

.ar-field { margin-bottom:1rem; }
.ar-field:last-child { margin-bottom:0; }
.ar-field label { display:block; font-size:1.25rem; color:#182550; font-weight:600; margin-bottom:.4rem; }
.ar-field input, .ar-field select, .ar-field textarea {
  width:100%; padding:.7rem .9rem; border:1px solid #d5d8e0; border-radius:6px;
  font:inherit; font-size:1.35rem; background:#fff; color:#182550;
}
.ar-field input:focus, .ar-field select:focus, .ar-field textarea:focus { outline:2px solid #e4e8f2; border-color:#182550; }
.ar-field.ar-off { display:none; }
.ar-hint { font-size:1.25rem; color:#5b6170; margin-top:.4rem; line-height:1.45; }
.ar-todo { color:#d9631f; font-weight:600; }
.ar-muted { color:#5b6170; font-weight:400; }

.ar-cname { font-size:1.4rem; font-weight:600; margin-bottom:.2rem; color:#182550; }
.ar-cline { display:block; font-size:1.35rem; color:#3f4557; line-height:1.65; text-decoration:none; }
a.ar-cline { color:#182550; }
a.ar-cline:hover { text-decoration:underline; }
.ar-csub { font-size:1.2rem; color:#182550; text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin:1.2rem 0 .3rem; }

.ar-kv { display:grid; grid-template-columns:auto 1fr; gap:.7rem 1.2rem; font-size:1.35rem; margin:0; }
.ar-kv dt { color:#5b6170; white-space:nowrap; }
.ar-kv dd { margin:0; font-weight:500; color:#182550; }
.ar-kv dd.ar-due, .ar-due { color:#d9631f; font-weight:700; }

.ar-bal { display:flex; justify-content:space-between; gap:1rem; font-size:1.35rem; padding:.3rem 0; }
.ar-bal span { color:#5b6170; }
.ar-bal b { font-variant-numeric:tabular-nums; font-weight:600; color:#182550; }
.ar-bal b.ar-paid-amt { color:#1f7a52; }
.ar-bal.ar-total { border-top:1px solid #e7e9ee; margin-top:.5rem; padding-top:.8rem; }
.ar-bal.ar-total b { font-size:1.65rem; font-weight:700; }
.ar-bal.ar-total.ar-due b { color:#d9631f; }
/* Neutral, not a warning: in phase 1, AR entries outrunning QuickBooks is the
   expected state rather than an error. */
.ar-unposted { font-size:1.2rem; color:#3f4557; background:#f2f4f9; border:1px solid #e4e8f2; border-radius:5px; padding:.6rem .8rem; margin-top:.8rem; line-height:1.4; }

.ar-cur-note { font-size:1.2rem; color:#96601a; background:#fdf3e6; border:1px solid #f3e0c3; border-radius:5px; padding:.6rem .8rem; margin-top:.8rem; line-height:1.4; }

.ar-pay { display:flex; justify-content:space-between; gap:.8rem; font-size:1.3rem; padding:.5rem 0; border-bottom:1px solid #e7e9ee; }
.ar-pay:last-child { border-bottom:0; }
.ar-pay-meta { color:#3f4557; }
.ar-pay-amt { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; color:#182550; }
.ar-none { font-size:1.35rem; color:#5b6170; }
.ar-pay.ar-voided .ar-pay-meta, .ar-pay.ar-voided .ar-pay-amt { text-decoration:line-through; opacity:.55; }
.ar-void-note { color:#96601a; font-weight:600; }
.ar-void {
  margin-left:.8rem; border:1px solid #d5d8e0; background:#fff; color:#5b6170;
  border-radius:4px; font-size:1.1rem; font-weight:600; padding:.1rem .6rem; cursor:pointer; font-family:inherit;
}
.ar-void:hover { border-color:#d9631f; color:#d9631f; background:#fef4ee; }

/* Delivery instruction in the invoice modal — "Invoice via" doubles as the
   record of how it was sent and the instruction for whoever sends it. */
.ar-deliver { margin-top:1.4rem; padding:1.2rem 1.4rem; background:#f2f4f9; border:1px solid #e4e8f2; border-radius:6px; font-size:1.35rem; color:#182550; line-height:1.6; }
.ar-deliver b { display:block; font-size:1.2rem; text-transform:uppercase; letter-spacing:.05em; color:#5b6170; margin-bottom:.4rem; }
.ar-deliver a { color:#182550; font-weight:600; }
.ar-deliver.ar-deliver-warn { background:#fdf3e6; border-color:#f3e0c3; color:#96601a; }
.ar-deliver.ar-deliver-warn b { color:#96601a; }

.ar-cmt { border-left:2px solid #e7e9ee; padding-left:1rem; margin-bottom:1.1rem; }
.ar-cmt:last-child { margin-bottom:0; }
.ar-cmt.ar-recent { border-left-color:#F17824; }
.ar-cmt-when { font-size:1.3rem; color:#182550; font-weight:600; }
.ar-cmt-type { font-size:1.4rem; font-weight:700; color:#182550; margin-top:.1rem; }
.ar-cmt-text { font-size:1.3rem; color:#3f4557; margin-top:.3rem; line-height:1.5; }

.ar-card-foot { display:flex; align-items:center; gap:1rem; padding:1.1rem 1.8rem; border-top:1px solid #e7e9ee; background:#fafafa; flex-wrap:wrap; }
.ar-actions { margin-left:auto; display:flex; gap:.8rem; }

/* Sync freshness. Neutral by default; only draws attention once genuinely
   stale, so it reads as information rather than a persistent warning. */
.ar-sync { display:inline-flex; align-items:center; gap:.5rem; margin-left:1.6rem; font-size:1.25rem; color:#767c8b; }
.ar-sync.ar-sync-stale { color:#96601a; }
.ar-refresh {
  display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem;
  border:1px solid #d5d8e0; border-radius:5px; background:#fff; color:#182550; cursor:pointer; padding:0;
}
.ar-refresh svg { width:13px; height:13px; }
.ar-refresh:hover { background:#f2f4f9; border-color:#182550; }
.ar-sync.ar-syncing .ar-refresh { pointer-events:none; opacity:.6; }
.ar-sync.ar-syncing .ar-refresh svg { animation:ar-spin .9s linear infinite; }
@keyframes ar-spin { to { transform:rotate(360deg); } }
.ar-refresh-all { margin-left:.4rem; }
.ar-toggle { border:0; background:none; color:#182550; font-size:1.35rem; font-weight:600; padding:0; display:inline-flex; align-items:center; gap:.7rem; cursor:pointer; font-family:inherit; }
.ar-toggle:hover { text-decoration:underline; }
.ar-caret { display:inline-block; transition:transform .15s; }
.ar-toggle.ar-open .ar-caret { transform:rotate(90deg); }

.ar-lines { border-top:1px solid #e7e9ee; overflow-x:auto; }
.ar-lines.ar-off { display:none; }
.ar-lines table { width:100%; border-collapse:collapse; font-size:1.35rem; }
.ar-lines th { text-align:left; font-size:1.15rem; text-transform:uppercase; letter-spacing:.06em; color:#182550; font-weight:700; padding:.9rem 1.8rem; background:#fff; border-bottom:1px solid #e7e9ee; }
.ar-lines td { padding:.9rem 1.8rem; border-bottom:1px solid #e7e9ee; color:#182550; }
.ar-lines tfoot td { font-weight:700; background:#fafafa; border-bottom:0; }
.ar-num { font-variant-numeric:tabular-nums; text-align:right; }

/* ---------- badges & buttons ---------- */
.ar-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .9rem; border-radius:20px; font-size:1.25rem; font-weight:600; line-height:1.5; white-space:nowrap; }
.ar-badge.ar-gray  { background:#f4f5f7; color:#3f4557; border:1px solid #e7e9ee; }
.ar-badge.ar-navy  { background:#f2f4f9; color:#182550; border:1px solid #e4e8f2; }
.ar-badge.ar-alert { background:#fef4ee; color:#d9631f; border:1px solid #fbdcc7; }
.ar-badge.ar-ok    { background:#eaf5f0; color:#1f7a52; border:1px solid #cfe7dc; }
.ar-badge.ar-warn  { background:#fdf3e6; color:#96601a; border:1px solid #f3e0c3; }
.ar-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

.ar-btn { padding:.8rem 1.4rem; border-radius:6px; border:1px solid #d5d8e0; background:#fff; color:#182550; font-size:1.35rem; font-weight:500; cursor:pointer; font-family:inherit; }
.ar-btn:hover { background:#fafafa; border-color:#767c8b; }
.ar-btn.ar-primary { background:#182550; border-color:#182550; color:#fff; }
.ar-btn.ar-primary:hover { background:#243365; border-color:#243365; }
.ar-btn.ar-accent { background:#F17824; border-color:#F17824; color:#fff; }
.ar-btn.ar-accent:hover { background:#d9631f; border-color:#d9631f; }
.ar-btn.ar-xs { padding:.3rem .8rem; font-size:1.2rem; border-radius:5px; font-weight:600; }
.ar-btn:disabled { opacity:.45; cursor:not-allowed; }
.ar-btn:disabled:hover { background:#F17824; border-color:#F17824; }
.ar-btn.ar-primary:disabled:hover { background:#182550; border-color:#182550; }

.ar-req { font-size:1.1rem; font-weight:700; color:#d9631f; text-transform:uppercase; letter-spacing:.05em; margin-left:.4rem; }

/* ---------- sidebar nav ----------
   Values mirror the CRM's own .nav-item exactly (padding 1.3rem 2rem,
   1.4rem/500, rgba(255,255,255,0.65), 3px transparent left border, 18px
   icon). AR items must be visually indistinguishable from the existing
   ones — if these drift, the section reads as bolted on. */
.ar-nav-section {
  font-size:1.1rem; text-transform:uppercase; letter-spacing:.1em;
  color:rgba(255,255,255,.45); font-weight:700; padding:1.2rem 2rem .5rem;
}
.ar-nav-item {
  display:flex; align-items:center; gap:1.2rem; padding:1.3rem 2rem;
  color:rgba(255,255,255,.65); cursor:pointer; transition:all .2s;
  font-size:1.4rem; font-weight:500; border-left:3px solid transparent; user-select:none;
}
.ar-nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.ar-nav-item.ar-active { background:rgba(241,120,36,.18); color:#fff; border-left-color:#F17824; }
.ar-nav-item svg { width:18px; height:18px; flex-shrink:0; }
.ar-nav-count {
  margin-left:auto; font-size:1.1rem; font-weight:700; padding:.2rem .8rem;
  border-radius:20px; background:rgba(255,255,255,.16); color:#fff; flex-shrink:0;
}
.ar-nav-count.ar-alert-count { background:#F17824; color:#fff; }

/* ---------- modal ---------- */
.ar-modal { position:fixed; inset:0; display:none; place-items:center; z-index:600; padding:2rem; background:rgba(24,37,80,.35); }
.ar-modal.ar-open { display:grid; }
.ar-modal-box { background:#fff; border-radius:10px; width:52rem; max-width:100%; max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(24,37,80,.28); }
.ar-modal-head { padding:1.8rem 2.2rem 0; }
.ar-modal-head h3 { margin:0; font-size:1.85rem; font-weight:650; color:#182550; }
.ar-modal-head p { margin:.6rem 0 0; color:#3f4557; font-size:1.4rem; }
.ar-modal-body { padding:1.8rem 2.2rem; }
.ar-fields { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.ar-field.ar-full { grid-column:1 / -1; }
.ar-modal-foot { padding:1.4rem 2.2rem; background:#fafafa; border-top:1px solid #e7e9ee; display:flex; gap:.8rem; justify-content:flex-end; }

.ar-preview { border:1px solid #e7e9ee; border-radius:6px; padding:1.4rem; background:#fafafa; font-size:1.35rem; color:#3f4557; margin-top:1.4rem; line-height:1.7; }
.ar-pv-head { display:flex; justify-content:space-between; font-weight:600; color:#182550; margin-bottom:.8rem; }
.ar-note { display:block; font-size:1.3rem; color:#3f4557; margin-top:1.2rem; padding:1rem 1.2rem; background:#f2f4f9; border-radius:6px; line-height:1.55; }
.ar-warnbox { font-size:1.3rem; color:#96601a; background:#fdf3e6; border:1px solid #f3e0c3; border-radius:6px; padding:1rem 1.2rem; margin-bottom:1.4rem; line-height:1.5; }

/* ---------- toast ---------- */
.ar-toast {
  position:fixed; bottom:2.2rem; left:50%; transform:translate(-50%,2rem); background:#182550; color:#fff;
  padding:1.1rem 1.8rem; border-radius:8px; font-size:1.35rem; box-shadow:0 8px 24px rgba(24,37,80,.3);
  opacity:0; pointer-events:none; transition:all .2s; z-index:700; max-width:60rem;
}
.ar-toast.ar-show { opacity:1; transform:translate(-50%,0); }

/* ---------- responsive ---------- */
@media (max-width:1800px) { .ar-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:1200px) { .ar-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:820px)  { .ar-grid { grid-template-columns:minmax(0,1fr); } .ar-search { width:100%; } }