/* Capacity signals sit on the navigation icon; roster/compliance counts keep their space. */
.sidebar-usage-cue {
    position: absolute;
    left: 31px;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 2px var(--sidebar-bg, #f8fafc);
}
.sidebar-usage-cue--at_limit { background: #f59e0b; }
.sidebar-usage-cue--over_limit { background: #ef4444; }
.sidebar-inline.collapsed:not(.mobile-open) .sidebar-usage-cue { left: auto; right: 10px; top: 7px; }

/* A compact account action uses the same tier palette as the billing plan card. */
.sidebar-plan-card {
    flex-shrink: 0;
    margin: 12px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--usage-plan-dark), var(--usage-plan-primary));
}
.sidebar-plan-card__expanded { padding: 13px 12px 12px; }
.sidebar-plan-card__eyebrow { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.sidebar-plan-card__title { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; font-size: 15px; font-weight: 600; }
.sidebar-plan-card__title .material-symbols-outlined { font-size: 19px; opacity: .8; }
.sidebar-plan-card p { margin: 5px 0 11px; font-size: 11px; opacity: .85; }
.sidebar-plan-card a { color: inherit; text-decoration: none; }
.sidebar-plan-card__expanded a { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 8px 6px; border: 1px solid #ffffff50; border-radius: 6px; background: #fff; color: var(--usage-plan-dark); font-size: 11px; font-weight: 600; white-space: nowrap; }
.sidebar-plan-card__expanded a:hover { background: #f0f9ff; }
.sidebar-plan-card a:focus-visible { outline: 2px solid #0f172a; outline-offset: 3px; }
.sidebar-plan-card__expanded a .material-symbols-outlined { font-size: 15px; }
.sidebar-plan-card__compact { display: none; }
.sidebar-inline.collapsed:not(.mobile-open) .sidebar-plan-card { margin: 10px 8px; border-radius: 8px; }
.sidebar-inline.collapsed:not(.mobile-open) .sidebar-plan-card__expanded { display: none; }
.sidebar-inline.collapsed:not(.mobile-open) .sidebar-plan-card__compact { display: flex; align-items: center; justify-content: center; min-height: 40px; }

/* Section usage follows billing's tier header, white surface and compact metrics. */
.usage-notice {
    flex-shrink: 0;
    min-width: 0;
    margin: 24px 32px 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    overflow: hidden;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 2px #0f172a04;
}
.usage-notice__plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: linear-gradient(135deg, var(--usage-plan-dark), var(--usage-plan-primary)); color: #fff; }
.usage-notice__plan-name { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.usage-notice__plan-name .material-symbols-outlined { font-size: 17px; opacity: .85; }
.usage-notice__plan-caption { font-size: 11px; opacity: .8; }
.usage-notice__body { display: flex; align-items: center; gap: 32px; padding: 20px; }
.usage-notice__details { flex: 1; min-width: 0; }
.usage-notice__heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.usage-notice h2 { margin: 0; color: #1e3a5a; font-size: 15px; font-weight: 600; line-height: 1.4; }
.usage-notice__status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px; background: #ecfdf5; color: #047857; font-size: 10px; font-weight: 500; }
.usage-notice--over_limit .usage-notice__status { color: #b91c1c; background: #fef2f2; }
.usage-notice--at_limit .usage-notice__status { color: #a16207; background: #fffbeb; }
.usage-notice__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 20px 24px; padding: 0; margin: 16px 0 0; list-style: none; }
.usage-notice__metric { min-width: 0; padding-left: 12px; border-left: 2px solid #10b981; }
.usage-notice__metric[data-metric-status="over_limit"] { border-color: #ef4444; }
.usage-notice__metric[data-metric-status="at_limit"] { border-color: #f59e0b; }
.usage-notice__metric-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 12px; color: #64748b; }
.usage-notice__metric-caption { color: #94a3b8; font-size: 10px; }
.usage-notice__value { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; font-size: 13px; color: #94a3b8; }
.usage-notice__value strong { color: #1e3a5a; font-size: 23px; font-weight: 600; line-height: 1.4; }
.usage-notice__track { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: #f1f5f9; }
.usage-notice__track span { display: block; height: 100%; background: #10b981; border-radius: inherit; }
.usage-notice__metric[data-metric-status="over_limit"] .usage-notice__track span { background: #ef4444; }
.usage-notice__metric[data-metric-status="at_limit"] .usage-notice__track span { background: #f59e0b; }
.usage-notice__action { flex: 0 1 270px; min-width: 0; padding-left: 24px; border-left: 1px solid #e2e8f0; }
.usage-notice__action p { margin: 0 0 12px; color: #64748b; font-size: 12px; line-height: 1.6; }
.usage-notice__link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--usage-plan-primary); border-radius: 7px; background: var(--usage-plan-primary); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; }
.usage-notice__link:hover { background: var(--usage-plan-dark); border-color: var(--usage-plan-dark); }
.usage-notice__link:focus-visible { outline: 2px solid #0f172a; outline-offset: 3px; }
.usage-notice__link .material-symbols-outlined { font-size: 17px; }
.usage-notice__action-note { display: block; margin-top: 7px; color: #94a3b8; font-size: 10px; }
@media (max-width: 767px) {
    .usage-notice { margin: 16px 0 0; }
    .usage-notice__plan { padding: 10px 16px; }
    .usage-notice__body { flex-direction: column; align-items: stretch; gap: 18px; padding: 16px; }
    .usage-notice__action { flex-basis: auto; padding: 14px 0 0; border-left: 0; border-top: 1px solid #e2e8f0; }
    .usage-notice__link { width: 100%; }
    .usage-notice__metrics { gap: 14px; }
    .sidebar-plan-card__expanded a { min-height: 44px; }
}