/* Management of the client section (id account, ac-: Apps\Account): summary, purchase orders, invoices and their comments.
   Moved out of app.css as they were (design system wave 0.4, Source\Docs\Design system\Design system.md section 14): one
   file per area, so that the app waves never edit the same file. Linked by Components\App.razor right after app.css,
   in the order the rules had there (home, admin, monitoring, management, account, messaging, support, training,
   azurecosts, tools), so every rule keeps its place in the cascade. Tokens only: light and dark both work. */

/* ===== Management (client section, id account) ===== */
/* Management app of the client section (id account, ex Account): summary, purchase orders, invoices and their comments (Apps/Account). Also used by the
   invoice comments of the Management app (Apps/Management/InvoiceComments.razor). */
.ac-page, .ac-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ac-bar-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--border); }
.ac-view-select { min-width: 280px; }

.ac-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.ac-head-note { padding-bottom: 3px; }
.ac-eyebrow { color: var(--muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }
.ac-eyebrow b { color: var(--text); }
.ac-title { margin: 2px 0 0; font-size: 1.45rem; font-weight: 900; line-height: 1.2; }
.ac-title:focus { outline: none; }
.panel h2.ac-title { font-size: 1.35rem; font-weight: 900; }
.panel h3.ac-h { display: flex; align-items: center; gap: 6px; margin: 0; }
.ac-kpis .kpi .value { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ac-kpis .kpi .value.ac-kpi-date { font-size: 1.3rem; }
.ac-neg { color: var(--bad); }
.ac-empty { min-height: 80px; }
.ac-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Chips: colour + text (+ icon), never colour alone */
.ac-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}
.ac-chip .mud-icon-root { font-size: 0.95rem; }
.ac-chip.ac-ok { background: var(--good-soft); color: var(--good-text); }
.ac-chip.ac-due { background: var(--info-soft); color: var(--info); }
.ac-chip.ac-low { background: var(--warn-soft); color: var(--warn); }
.ac-chip.ac-over { background: var(--bad-soft); color: var(--bad); }
.ac-chip.big { padding: 4px 12px; font-size: 0.85rem; }
.ac-chip.ac-off { background: var(--chip); color: var(--muted); }                 /* a declined quote */
.ac-local { margin-top: 2px; color: var(--accent); font-size: 0.8rem; font-weight: 800; }   /* ≈ amount in the client's currency */
.ac-quotes .sub { display: block; color: var(--muted); font-size: 0.78rem; }

/* Buttons and links (no row selection: each row has its own actions) */
.ac-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;   /* a link and a button side by side stay on one line (their baselines differ) */
  transition: background 120ms ease, border-color 120ms ease;
}
.ac-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.ac-btn:focus-visible, .ac-po-card:focus-visible, .ac-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-btn.on, .ac-btn.primary { border-color: var(--os-accent-fill); background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.ac-btn.primary:hover:not(:disabled) { background: var(--os-accent-fill-hover); }
.ac-btn:disabled, .ac-btn.disabled { cursor: not-allowed; opacity: 0.4; pointer-events: none; }
.ac-btn.ac-icon { padding: 5px 6px; }
.ac-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--os-accent);
  color: var(--os-on-accent);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}
.ac-btn.on .ac-count { background: var(--os-on-accent-fill); color: var(--os-accent-fill); }
.ac-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.ac-link:hover { text-decoration: underline; }
.ac-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ac-spacer { flex: 1; }
.ac-more { display: flex; justify-content: center; padding-top: 10px; }

/* Purchase order cards (links to the PO's view) and consumption bars */
.ac-po-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ac-po-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--good);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.ac-po-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1); transform: translateY(-1px); }
.ac-po-card.ac-low { border-left-color: #d08a2a; }
.ac-po-card.ac-over { border-left-color: var(--bad); }
.ac-po-card.ac-off, .ac-po-card.ac-none { border-left-color: #c7c7c7; }
.ac-po-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-po-number { font-size: 0.95rem; font-weight: 900; overflow-wrap: anywhere; }
.ac-po-summary { min-height: 1.2em; color: var(--muted); font-size: 0.88rem; }
.ac-po-figures, .ac-po-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.ac-po-foot { color: var(--muted); }
.ac-po-foot b { color: var(--text); }
.ac-po-go { display: inline-flex; align-items: center; color: var(--accent); font-weight: 700; }
.ac-meter { height: 8px; overflow: hidden; border-radius: 999px; background: var(--chip); }
.ac-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--good); }
.ac-meter.ac-low > span { background: #d08a2a; }
.ac-meter.ac-over > span { background: var(--bad); }
.ac-meter.ac-off > span, .ac-meter.ac-none > span { background: #a3a3a3; }
.ac-meter.big { height: 12px; margin: 12px 0 6px; }
.ac-closed { margin-top: 12px; }
.ac-closed > summary { padding: 4px 0; color: var(--muted); cursor: pointer; font-size: 0.85rem; font-weight: 800; }
.ac-closed[open] > summary { margin-bottom: 10px; }

/* One purchase order */
.ac-po-head { border-top: 4px solid var(--good); }
.ac-po-head.ac-low { border-top-color: #d08a2a; }
.ac-po-head.ac-over { border-top-color: var(--bad); }
.ac-po-head.ac-off, .ac-po-head.ac-none { border-top-color: #c7c7c7; }
.ac-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; }
.ac-figures > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 8px; background: var(--panel-2); }
.ac-figures .label, .ac-projects-label, .ac-add-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ac-figures b { font-size: 1.2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ac-projects { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.ac-projects-label { margin-right: 4px; }
.ac-project { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); font-size: 0.8rem; font-weight: 700; }
.ac-project .mud-icon-root { color: var(--accent); font-size: 1rem; }
.ac-project.done { background: var(--chip); color: var(--muted); }
.ac-project.done .mud-icon-root { color: var(--good); }

/* Invoices and their comments (opened under the row) */
.ac-actions { text-align: right; white-space: nowrap; }
.ac-actions .ac-btn + .ac-btn { margin-left: 6px; }
.ac-invoices tr.ac-open > td { border-bottom-color: transparent; }
.ac-thread-row > td { padding: 2px 10px 14px; }
.ac-thread-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 0.85rem; }
.ac-close { padding: 2px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.ac-close:hover { background: var(--accent-soft); }
.ac-thread { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); }
.ac-add { display: flex; flex-direction: column; gap: 6px; }
.ac-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  resize: vertical;
}
.ac-textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.ac-add-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-thread-empty { padding: 4px 2px; }
.ac-comments { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ac-comment { padding: 8px 12px; border: 1px solid var(--rule); border-left: 4px solid #c9c4b3; border-radius: 8px; background: var(--panel); }
.ac-comment.company { border-left-color: var(--brand-gold); }
.ac-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.82rem; }
.ac-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 900; }
.ac-comment.company .ac-avatar { background: var(--brand-gold); color: var(--text); }
.ac-source { padding: 0 7px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: 0.7rem; font-weight: 800; }
.ac-when { margin-left: auto; color: var(--faint); font-size: 0.75rem; }
.ac-comment-text { margin-top: 4px; font-size: 0.88rem; overflow-wrap: anywhere; white-space: pre-wrap; }

/* Narrow screens and the Reporting portal's frame */
@media (max-width: 720px) {
  .ac-hide-narrow, .ac-btn-text, .ac-bar-sep { display: none; }
  .ac-page .demo-select { flex: 1 1 200px; min-width: 0; }
  .ac-title, .panel h2.ac-title { font-size: 1.2rem; }
  .ac-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-kpis .kpi .value { font-size: 1.2rem; }
  .ac-kpis .kpi .value.ac-kpi-date { font-size: 1.05rem; }
  .ac-po-grid { grid-template-columns: minmax(0, 1fr); }
}
.ac-page .panel-head { flex-wrap: wrap; }
@media (max-width: 720px) {
  /* Invoices as cards: number, date, total / status, actions */
  .ac-invoices thead { display: none; }
  .ac-invoices, .ac-invoices tbody { display: block; }
  .ac-invoices tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; padding: 10px 2px; border-bottom: 1px solid var(--rule); }
  .ac-invoices tr.ac-open { border-bottom: 0; }
  .ac-invoices td { padding: 0; border: 0; }
  .ac-invoices td.ac-actions { grid-column: 2 / -1; }
  .ac-invoices tr.ac-thread-row { display: block; padding: 0 0 12px; }
  .ac-invoices tr.ac-thread-row > td { display: block; padding: 0; }
  .ac-thread { padding: 10px; }
}