/* Story #984: accountant home dashboard (Peppol and Adsolut). The values are the design mock's
   ("Home Boekhouder v3.dc.html", handoff_home_boekhouder). Every rule is scoped under .acc-home so it
   outranks styles.css and royal-theme.css without touching any other page (global file, no CSS isolation). */

.acc-home {
  --acc-text: #232427;
  --acc-muted: #6b7280;
  --acc-label: #4b5563;
  --acc-sub: #8c9097;
  --acc-axis: #9aa1ad;
  --acc-legend: #3a4150;
  --acc-line: #eef0f3;
  --acc-grid: #f1f3f7;
  --acc-green: #16a36e;
  --acc-amber: #d97706;
  --acc-red: #e0524a;
  --acc-red-icon: #ef4444;
  --acc-red-seg: #ef5b4c;
  --acc-range-bg: #e3ebfb;
  --acc-track: #dbe6fb;
  --acc-hover: #f6f9fd;
  --acc-card-bg: #fff;
  --acc-primary: rgb(var(--primary-rgb));
  --acc-blue: rgb(37, 99, 235);
  --acc-blue-tint: rgba(37, 99, 235, .1);
  --acc-blue-area: rgba(37, 99, 235, .05);
  --acc-red-tint: rgba(239, 68, 68, .1);
  --acc-amber-tint: rgba(217, 119, 6, .12);
}

.acc-home * { box-sizing: border-box; }




/* chart card (mock l.59-91) */
/* client pa-4; 40px bottom room for the x-axis labels (story 997 D4) */
.acc-home .mud-card.custom-card .acc-chart-body { padding: 16px 16px 40px; }
.acc-home .acc-legend { display: flex; justify-content: flex-end; gap: 16px; margin-bottom: 18px; }
.acc-home .acc-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--acc-label); }
.acc-home .acc-legend-dot { width: 11px; height: 11px; border-radius: 50%; }
.acc-home .acc-plot { position: relative; height: 220px; margin-left: 28px; }
.acc-home .acc-plot-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--acc-grid); }
.acc-home .acc-plot-ytick { position: absolute; right: calc(100% + 8px); transform: translateY(-50%); font-size: 10px; color: var(--acc-axis); }
.acc-home .acc-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.acc-home .acc-plot-point { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; border: 1.5px solid; }
.acc-home .acc-plot-xlabel { position: absolute; top: calc(100% + 10px); transform: translateX(-50%); font-size: 10px; color: var(--acc-axis); }

/* middle row: export status and top clients (mock l.93-139) */
.acc-home .acc-status { display: flex; flex-direction: column; }
.acc-home .acc-status-body { display: flex; align-items: center; gap: 26px; flex: 1; flex-wrap: wrap; }
.acc-home .acc-ring { position: relative; flex: none; width: 146px; height: 146px; }
.acc-home .acc-ring svg { width: 146px; height: 146px; transform: rotate(-90deg); }
.acc-home .acc-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.acc-home .acc-ring-label { font-size: 9.5px; color: var(--acc-muted); text-transform: uppercase; letter-spacing: .4px; }
.acc-home .acc-ring-total { font-size: 19px; font-weight: 700; color: var(--acc-text); line-height: 1.2; }
.acc-home .acc-ring-sub { font-size: 10px; color: var(--acc-muted); }
.acc-home .acc-status-legend { flex: 1; min-width: 220px; display: grid; grid-template-columns: 1fr auto auto; gap: 9px 18px; align-items: center; }
.acc-home .acc-seg-label { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--acc-legend); }
.acc-home .acc-seg-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.acc-home .acc-seg-count { font-size: 11px; font-weight: 600; color: var(--acc-text); text-align: right; }
.acc-home .acc-seg-pct { font-size: 10.5px; color: var(--acc-axis); text-align: right; }
.acc-home .acc-status-foot { padding: 10px 14px; border-top: 1px solid var(--acc-line); font-size: 10.5px; color: var(--acc-red); }

.acc-home .acc-top-body { display: flex; flex-direction: column; gap: 16px; }
.acc-home .acc-top-row { display: flex; align-items: center; gap: 12px; }
.acc-home .acc-top-avatar { width: 30px; height: 30px; border-radius: 4px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: rgba(37, 99, 235, .1); color: var(--acc-primary); }
.acc-home .acc-top-main { flex: 1; min-width: 0; }
.acc-home .acc-top-line { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.acc-home .acc-top-name { font-weight: 600; color: var(--acc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-home .acc-top-count { font-weight: 600; color: var(--acc-text); white-space: nowrap; }
.acc-home .acc-top-track { height: 4px; border-radius: 2px; background: var(--acc-track); margin-top: 6px; overflow: hidden; }
.acc-home .acc-top-fill { height: 100%; background: var(--acc-primary); }

/* list cards (mock l.142-162); rows and legend carry a pointer and a hover as in the mock but no behaviour (decision 2) */
.acc-home .acc-list { display: flex; flex-direction: column; min-height: 262px; }
/* sizes of InvoiceAttentionPanel.razor:10,17 (story 997 D5) */
.acc-home .acc-list-headicon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 17px; flex: none; }
.acc-home .acc-list-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 20px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; }
.acc-home .acc-list-body { flex: 1; }
.acc-home .acc-list-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--acc-grid); cursor: pointer; }
.acc-home .acc-list-row:hover { background: var(--acc-hover); }
.acc-home .acc-list-rowicon { width: 30px; height: 30px; border-radius: 4px; display: grid; place-items: center; font-size: 14px; flex: none; }
.acc-home .acc-list-text { min-width: 0; flex: 1; line-height: 1.35; }
.acc-home .acc-list-rowtitle { font-size: 11.5px; font-weight: 600; color: var(--acc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-home .acc-list-rowsub { font-size: 10.5px; color: var(--acc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-home .acc-list-amount { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.acc-home .acc-list-empty { padding: 12px 14px; font-size: 11.5px; }
.acc-home .acc-list-foot { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--acc-line); font-size: 10.5px; color: var(--acc-legend); }
.acc-home .acc-list-legend { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }