/* ---- V1.44 operations apps: the Notifications monitor (nm-, Client\Apps\NotificationsMonitor) and Claude usage (cu-,
   Client\Apps\ClaudeUsage). They also use Azure costs' classes of azurecosts.css (az-field, az-input, az-kpis, az-share, az-setup,
   az-steps, az-message, az-foot) and the theme's tokens, so light and dark both work. ---- */

/* Notifications monitor: the toolbar, the table of senders and subjects, the history of one */
.nm-toolbar { align-items: flex-end; gap: 10px; margin-bottom: 4px; }
.kpi .value.nm-small { font-size: 1.05rem; }
.nm-table td { vertical-align: top; }
.nm-table tr.nm-watched td { background: var(--accent-soft); }
.nm-pattern { min-width: 220px; overflow-wrap: anywhere; }
.nm-open { display: inline-flex; align-items: flex-start; gap: 4px; padding: 0; border: 0; background: none; color: var(--text);
    font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.nm-open:hover span, .nm-open:focus-visible span { text-decoration: underline; }
.nm-open .mud-icon-root { flex: none; margin-top: 1px; color: var(--muted); }
.nm-history-row td { background: var(--panel); }
.nm-history { display: grid; gap: 3px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 0.84rem; }
.nm-history li { display: flex; gap: 10px; overflow-wrap: anywhere; }
.nm-when { flex: none; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Claude usage: the two tables side by side, the price table, the new key, the commands */
.grid-2.cu-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cu-table td:first-child { min-width: 140px; overflow-wrap: anywhere; }
.cu-table td.num, .cu-prices td.num { font-variant-numeric: tabular-nums; }
.cu-prices .az-input { width: 100%; min-width: 0; }
.cu-prices .cu-model { min-width: 170px; }
.cu-prices .cu-price { max-width: 96px; text-align: right; }
.cu-missing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.cu-secret { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft); }
.cu-secret code { display: block; margin: 6px 0; font-size: 0.95rem; overflow-wrap: anywhere; user-select: all; }
.cu-code { margin: 6px 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--field);
    color: var(--text); font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .grid-2.cu-even { grid-template-columns: minmax(0, 1fr); }
    .nm-pattern { min-width: 160px; }
}