/* =============================================================================
   KTHX — usage meters (workbench/license#34)
   Reusable used/total meter component: an uppercase label, a monospace
   value, and a horizontal fill bar. Used by the Home dashboard's Server
   (CPU load / RAM / disk) and Runners (per-host disk) sections.

   Bar widths are carried on a data-pct attribute and mapped to a width by
   the generated rules at the foot of this file — NOT an inline style, since
   the page CSP is style-src 'self' with no 'unsafe-inline' (the same reason
   the admin group tree uses data-depth classes rather than inline padding).
   ========================================================================== */

/* Metric cards are full-width like every other section on the page; the meter
   grid inside is what's kept to a readable measure, so labels and values don't
   drift apart (the gap the old .kv layout had). Previously the whole card was
   capped at 640px, which left it looking orphaned beside the full-width
   sections around it (workbench/license#43 Phase 4). */
.card-metrics .meters { max-width: 640px; }

.meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem 1.5rem;
}

.meter { min-width: 0; }
.meter-wide { grid-column: 1 / -1; }

.meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}

/* WRAPS, and must (workbench/license#68).

   This was white-space: nowrap with nothing bounding it, so a label longer than
   its grid column simply painted over the next one -- two mount paths on top of
   each other, each unreadable. Seen on a DiskStation, whose bind mounts run to
   `/volume1/@appdata/ContainerManager/all_shares/PLEXMEDIASERVER`, but nothing
   about it was Synology-specific: any deep mount, dataset or datastore name did
   it, on the node page and the Home tiles alike.

   Wrapping rather than `text-overflow: ellipsis`, which was the other candidate
   and is wrong here: these paths differ only in their LAST segment, so clipping
   the tail makes twelve rows read as the same row. overflow-wrap: anywhere
   because a path has no spaces to break at -- break-word alone leaves it
   overflowing.

   min-width: 0 so the label actually shrinks inside .meter-head's flex row
   instead of forcing it wider; the .meter itself already has it for the grid. */
.meter-label {
    color: var(--fg-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    min-width: 0;
    overflow-wrap: anywhere;
}

.meter-val {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--fg-muted);
    white-space: nowrap;
}
.meter-val strong { color: var(--fg); font-weight: 600; }

.meter-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--track);
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    width: 0;                 /* set by the [data-pct] rules below */
    border-radius: 999px;
    background: var(--accent);
    transition: width .35s ease;
}
.meter-fill.warn   { background: var(--warn); }  /* matches .dot-warn (#136 status vocabulary) */
.meter-fill.danger { background: var(--danger); }
/* `.warn` is ALSO app.css's warning-box utility, which pads its element by
   .6rem .8rem and rounds it at --radius. On a 4-8px fill that padding made every
   amber bar taller than its track, drawn as a dome over the teal ones beside it
   (#136 Phase 4). Undone here for both levels so the three colours are one
   shape; red never had the padding, but keeping the pair together stops the
   next utility class doing the same thing to one of them. */
.meter-fill.warn,
.meter-fill.danger { padding: 0; border-radius: 999px; }

.meter-sub {
    margin-top: .3rem;
    color: var(--fg-muted);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

/* Compact load-average line: value chips that wrap gracefully instead of the
   single long row that used to overflow the .kv grid and wrap awkwardly. */
.loadline {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--fg-muted);
}
.loadline b { color: var(--fg); font-weight: 600; }
.loadline .load-cores { color: var(--fg-muted); }

/* data-pct (0–100) → fill width. Enumerated so the bar reflects the exact
   whole-percent value with no inline style (CSP-safe). */
.meter-fill[data-pct="0"] { width: 0%; }
.meter-fill[data-pct="1"] { width: 1%; }
.meter-fill[data-pct="2"] { width: 2%; }
.meter-fill[data-pct="3"] { width: 3%; }
.meter-fill[data-pct="4"] { width: 4%; }
.meter-fill[data-pct="5"] { width: 5%; }
.meter-fill[data-pct="6"] { width: 6%; }
.meter-fill[data-pct="7"] { width: 7%; }
.meter-fill[data-pct="8"] { width: 8%; }
.meter-fill[data-pct="9"] { width: 9%; }
.meter-fill[data-pct="10"] { width: 10%; }
.meter-fill[data-pct="11"] { width: 11%; }
.meter-fill[data-pct="12"] { width: 12%; }
.meter-fill[data-pct="13"] { width: 13%; }
.meter-fill[data-pct="14"] { width: 14%; }
.meter-fill[data-pct="15"] { width: 15%; }
.meter-fill[data-pct="16"] { width: 16%; }
.meter-fill[data-pct="17"] { width: 17%; }
.meter-fill[data-pct="18"] { width: 18%; }
.meter-fill[data-pct="19"] { width: 19%; }
.meter-fill[data-pct="20"] { width: 20%; }
.meter-fill[data-pct="21"] { width: 21%; }
.meter-fill[data-pct="22"] { width: 22%; }
.meter-fill[data-pct="23"] { width: 23%; }
.meter-fill[data-pct="24"] { width: 24%; }
.meter-fill[data-pct="25"] { width: 25%; }
.meter-fill[data-pct="26"] { width: 26%; }
.meter-fill[data-pct="27"] { width: 27%; }
.meter-fill[data-pct="28"] { width: 28%; }
.meter-fill[data-pct="29"] { width: 29%; }
.meter-fill[data-pct="30"] { width: 30%; }
.meter-fill[data-pct="31"] { width: 31%; }
.meter-fill[data-pct="32"] { width: 32%; }
.meter-fill[data-pct="33"] { width: 33%; }
.meter-fill[data-pct="34"] { width: 34%; }
.meter-fill[data-pct="35"] { width: 35%; }
.meter-fill[data-pct="36"] { width: 36%; }
.meter-fill[data-pct="37"] { width: 37%; }
.meter-fill[data-pct="38"] { width: 38%; }
.meter-fill[data-pct="39"] { width: 39%; }
.meter-fill[data-pct="40"] { width: 40%; }
.meter-fill[data-pct="41"] { width: 41%; }
.meter-fill[data-pct="42"] { width: 42%; }
.meter-fill[data-pct="43"] { width: 43%; }
.meter-fill[data-pct="44"] { width: 44%; }
.meter-fill[data-pct="45"] { width: 45%; }
.meter-fill[data-pct="46"] { width: 46%; }
.meter-fill[data-pct="47"] { width: 47%; }
.meter-fill[data-pct="48"] { width: 48%; }
.meter-fill[data-pct="49"] { width: 49%; }
.meter-fill[data-pct="50"] { width: 50%; }
.meter-fill[data-pct="51"] { width: 51%; }
.meter-fill[data-pct="52"] { width: 52%; }
.meter-fill[data-pct="53"] { width: 53%; }
.meter-fill[data-pct="54"] { width: 54%; }
.meter-fill[data-pct="55"] { width: 55%; }
.meter-fill[data-pct="56"] { width: 56%; }
.meter-fill[data-pct="57"] { width: 57%; }
.meter-fill[data-pct="58"] { width: 58%; }
.meter-fill[data-pct="59"] { width: 59%; }
.meter-fill[data-pct="60"] { width: 60%; }
.meter-fill[data-pct="61"] { width: 61%; }
.meter-fill[data-pct="62"] { width: 62%; }
.meter-fill[data-pct="63"] { width: 63%; }
.meter-fill[data-pct="64"] { width: 64%; }
.meter-fill[data-pct="65"] { width: 65%; }
.meter-fill[data-pct="66"] { width: 66%; }
.meter-fill[data-pct="67"] { width: 67%; }
.meter-fill[data-pct="68"] { width: 68%; }
.meter-fill[data-pct="69"] { width: 69%; }
.meter-fill[data-pct="70"] { width: 70%; }
.meter-fill[data-pct="71"] { width: 71%; }
.meter-fill[data-pct="72"] { width: 72%; }
.meter-fill[data-pct="73"] { width: 73%; }
.meter-fill[data-pct="74"] { width: 74%; }
.meter-fill[data-pct="75"] { width: 75%; }
.meter-fill[data-pct="76"] { width: 76%; }
.meter-fill[data-pct="77"] { width: 77%; }
.meter-fill[data-pct="78"] { width: 78%; }
.meter-fill[data-pct="79"] { width: 79%; }
.meter-fill[data-pct="80"] { width: 80%; }
.meter-fill[data-pct="81"] { width: 81%; }
.meter-fill[data-pct="82"] { width: 82%; }
.meter-fill[data-pct="83"] { width: 83%; }
.meter-fill[data-pct="84"] { width: 84%; }
.meter-fill[data-pct="85"] { width: 85%; }
.meter-fill[data-pct="86"] { width: 86%; }
.meter-fill[data-pct="87"] { width: 87%; }
.meter-fill[data-pct="88"] { width: 88%; }
.meter-fill[data-pct="89"] { width: 89%; }
.meter-fill[data-pct="90"] { width: 90%; }
.meter-fill[data-pct="91"] { width: 91%; }
.meter-fill[data-pct="92"] { width: 92%; }
.meter-fill[data-pct="93"] { width: 93%; }
.meter-fill[data-pct="94"] { width: 94%; }
.meter-fill[data-pct="95"] { width: 95%; }
.meter-fill[data-pct="96"] { width: 96%; }
.meter-fill[data-pct="97"] { width: 97%; }
.meter-fill[data-pct="98"] { width: 98%; }
.meter-fill[data-pct="99"] { width: 99%; }
.meter-fill[data-pct="100"] { width: 100%; }