/* Makli — monthly usage bar (lib/conversation_quota.php), shared by the Admin Console and the
   Client Portal. No inline styles (both apps run a strict CSP): the fill width is a class in 5 %
   steps (.mk-usage-w-0 … .mk-usage-w-100). Uses the design tokens of makli-ui.css. */
.mk-usage { display: grid; gap: 6px; min-width: 0; }
.mk-usage-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--mk-ink-2); }
.mk-usage-top strong { color: var(--mk-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.mk-usage.is-big .mk-usage-top strong { font-size: 22px; }
.mk-usage-pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-usage-track { position: relative; height: 8px; border-radius: 999px; background: var(--mk-line-soft, #e8eaef); overflow: hidden; }
.mk-usage.is-big .mk-usage-track { height: 10px; }
.mk-usage-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--mk-ok, #1f9d55); }
.mk-usage.is-warn .mk-usage-fill { background: var(--mk-warn, #c77700); }
.mk-usage.is-over .mk-usage-fill { background: var(--mk-err, #d03b3b); }
.mk-usage.is-warn .mk-usage-pct { color: var(--mk-warn, #c77700); }
.mk-usage.is-over .mk-usage-pct { color: var(--mk-err, #d03b3b); }
.mk-usage-sub { font-size: 12px; color: var(--mk-ink-3, #6b7280); }
.mk-usage-msg { font-size: 12.5px; margin: 2px 0 0; }
.mk-usage.is-compact { gap: 3px; min-width: 120px; }
.mk-usage.is-compact .mk-usage-top { font-size: 12px; }
.mk-usage.is-compact .mk-usage-top strong { font-size: 13px; }
.mk-usage.is-compact .mk-usage-track { height: 6px; }
.mk-usage-w-0 { width: 0%; }
.mk-usage-w-5 { width: 5%; }
.mk-usage-w-10 { width: 10%; }
.mk-usage-w-15 { width: 15%; }
.mk-usage-w-20 { width: 20%; }
.mk-usage-w-25 { width: 25%; }
.mk-usage-w-30 { width: 30%; }
.mk-usage-w-35 { width: 35%; }
.mk-usage-w-40 { width: 40%; }
.mk-usage-w-45 { width: 45%; }
.mk-usage-w-50 { width: 50%; }
.mk-usage-w-55 { width: 55%; }
.mk-usage-w-60 { width: 60%; }
.mk-usage-w-65 { width: 65%; }
.mk-usage-w-70 { width: 70%; }
.mk-usage-w-75 { width: 75%; }
.mk-usage-w-80 { width: 80%; }
.mk-usage-w-85 { width: 85%; }
.mk-usage-w-90 { width: 90%; }
.mk-usage-w-95 { width: 95%; }
.mk-usage-w-100 { width: 100%; }

/* Admin Console → Organizations list: the "This month" column. */
.mka-has-usage col.mka-c-usage { width: 124px; }
.mka-has-usage col.mka-c-owner { width: 17%; }
.mka-has-usage col.mka-c-url { width: 15%; }
.mka-has-usage .mk-usage.is-compact { min-width: 0; }