/* Azure costs (az-, Client\Apps\AzureCosts): the costs of the Azure subscription.
   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. */

/* ---- Azure costs (V1.17, Client\Apps\AzureCosts): the costs of the Azure subscription ---- */
.az-kpis { margin-bottom: 12px; }
.az-up { color: var(--bad); }
.az-down { color: var(--good-text); }
.az-muted { color: var(--muted); }
/* The forecast tile: spent (gold), the rest of the forecast (light gold), the budget's mark */
.az-meter { position: relative; display: flex; height: 8px; margin-top: 8px; border-radius: 4px; background: var(--chip); }
.az-meter-spent { display: block; height: 100%; border-radius: 4px 0 0 4px; background: var(--accent); }
.az-meter-forecast { display: block; height: 100%; background: var(--gold-soft); }
.az-meter-budget { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); }
.az-notices h3 { margin-top: 0; }
.az-notices ul { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.az-notice { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.az-notice.bad .mud-icon-root { color: var(--bad); }
.az-notice.warn .mud-icon-root { color: var(--warn); }
.az-notice.info .mud-icon-root { color: var(--info); }
.az-notice a { margin-left: auto; white-space: nowrap; }
/* The share of a row in its table's total */
.az-share { max-width: 260px; height: 4px; margin-top: 5px; border-radius: 2px; background: var(--chip); }
.az-share span { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.az-table td:first-child { min-width: 140px; overflow-wrap: anywhere; }
.az-filters { align-items: flex-end; gap: 10px; margin-bottom: 4px; }
.az-field { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.az-input { min-width: 130px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 400; }
.az-input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.az-grow { flex: 1 1 200px; }
.az-row { display: flex; flex-wrap: wrap; gap: 12px; }
.az-row .az-field { flex: 1 1 170px; }
.az-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 0.9rem; }
.az-total { font-size: 1.6rem; font-weight: 900; }
.az-back { display: inline-block; margin: 0 0 8px; font-size: 0.85rem; }
.az-title { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.az-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 8px 0; font-size: 0.86rem; }
.az-facts dt { color: var(--muted); font-weight: 700; }
.az-facts dd { margin: 0; overflow-wrap: anywhere; }
.az-steps ol { margin: 4px 0 8px 18px; padding: 0; font-size: 0.86rem; }
.az-message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; background: var(--good-soft); color: var(--good-text); font-weight: 600; }
.az-setup { border-left: 4px solid var(--accent); }
.az-foot { margin: 6px 2px 18px; }
@media (max-width: 900px) {
    .az-field, .az-input { width: 100%; }
    .az-share { max-width: none; }
}