/**
 * Inventory app — Usage tab.
 *
 * Builds on inventory-app.css (buttons, selects, segmented controls) and the
 * hr-tokens scale. Chart series colours live in inventory-app-usage.js because
 * the canvas cannot read CSS variables.
 */

/* Controls ------------------------------------------------------------- */

.inv-usage-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--hr-space-3);
    margin-bottom: var(--hr-space-4);
}

.inv-usage-controls .inv-segmented { margin-bottom: 0; }

.inv-usage-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--hr-font-sm);
}

.inv-usage-field .inv-select { min-width: 180px; max-width: 100%; }

/* Sync line ------------------------------------------------------------ */

.inv-usage-sync {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hr-space-3);
    font-size: var(--hr-font-sm);
    margin-bottom: var(--hr-space-4);
}

.inv-usage-sync.is-empty,
.inv-usage-sync.is-busy {
    padding: var(--hr-space-3) var(--hr-space-4);
    background: var(--hr-primary-soft);
    border-radius: var(--hr-radius);
    color: var(--hr-text-secondary);
}

/* Tiles ---------------------------------------------------------------- */

.inv-usage-tiles-wrap { margin-bottom: var(--hr-space-4); }

.inv-usage-tiles__heading {
    display: flex;
    align-items: center;
    gap: var(--hr-space-2);
    font-size: var(--hr-font-md);
    margin: 0 0 var(--hr-space-2);
}

.inv-usage-key {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.inv-usage-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--hr-space-3);
}

.inv-usage-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--hr-bg);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    padding: var(--hr-space-3) var(--hr-space-4);
}

.inv-usage-tile__label { font-size: var(--hr-font-sm); color: var(--hr-text-muted); }
.inv-usage-tile__value { font-size: var(--hr-font-xl); font-weight: 700; color: var(--hr-text); line-height: 1.2; }
.inv-usage-tile__note  { font-size: var(--hr-font-xs); color: var(--hr-text-muted); }

.inv-usage-tile.is-over { border-left: 3px solid var(--hr-status-reorder); }

.inv-usage-lastcount { font-size: var(--hr-font-xs); margin: var(--hr-space-1) 0 0; }

/* Charts --------------------------------------------------------------- */

.inv-usage-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--hr-space-4);
    margin: var(--hr-space-4) 0 var(--hr-space-2);
}

.inv-usage-chart {
    margin: 0;
    background: var(--hr-bg);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    padding: var(--hr-space-4);
    min-width: 0;
}

.inv-usage-chart figcaption {
    font-size: var(--hr-font-md);
    color: var(--hr-text-secondary);
    margin-bottom: var(--hr-space-2);
}

.inv-usage-chart__canvas { position: relative; height: 260px; }

.inv-usage-note { font-size: var(--hr-font-xs); margin: 0 0 var(--hr-space-4); }

#inv-usage-report.is-refreshing { opacity: 0.55; pointer-events: none; transition: opacity 0.15s; }

/* Tables and lists ----------------------------------------------------- */

.inv-usage-section { margin-top: var(--hr-space-5); }
.inv-usage-section h3 { font-size: var(--hr-font-lg); margin: 0 0 var(--hr-space-1); }
.inv-usage-section > p { font-size: var(--hr-font-sm); margin: 0 0 var(--hr-space-3); }

.inv-usage-buckets summary {
    cursor: pointer;
    font-size: var(--hr-font-sm);
    color: var(--hr-primary-strong);
    margin-bottom: var(--hr-space-2);
}

.inv-usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--hr-font-base);
}

.inv-usage-table th,
.inv-usage-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--hr-border);
    white-space: nowrap;
}

.inv-usage-table th {
    font-size: var(--hr-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hr-text-muted);
    background: var(--hr-bg-subtle);
}

.inv-usage-delta { font-size: var(--hr-font-xs); color: var(--hr-text-muted); margin-left: 4px; }
.inv-usage-delta.is-over { color: var(--hr-status-reorder); font-weight: 600; }

.inv-usage-flags {
    margin: var(--hr-space-4) 0;
    padding: var(--hr-space-3) var(--hr-space-4);
    background: var(--hr-status-low-soft);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    font-size: var(--hr-font-sm);
}

.inv-usage-flags p { margin: var(--hr-space-1) 0; }
.inv-usage-flags ul { margin: 0; padding-left: var(--hr-space-5); }

.inv-usage-mix {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
}

.inv-usage-mix li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--hr-space-3);
    padding: 8px 12px;
    border-bottom: 1px solid var(--hr-border);
    font-size: var(--hr-font-base);
}

.inv-usage-mix li:last-child { border-bottom: 0; }

/* Service setup -------------------------------------------------------- */

.inv-usage-setup {
    background: var(--hr-bg);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    padding: var(--hr-space-4);
    margin-bottom: var(--hr-space-5);
}

.inv-usage-setup__head h3 { margin: 0 0 var(--hr-space-1); font-size: var(--hr-font-lg); }
.inv-usage-setup__head p  { margin: 0 0 var(--hr-space-3); font-size: var(--hr-font-sm); }

.inv-usage-units {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hr-space-2);
    font-size: var(--hr-font-base);
    padding: var(--hr-space-3);
    background: var(--hr-bg-subtle);
    border-radius: var(--hr-radius);
    margin-bottom: var(--hr-space-3);
}

.inv-usage-units input[type="number"] { width: 90px; }
.inv-usage-units input[type="text"]   { width: 130px; }

.inv-usage-setup__bulk { font-size: var(--hr-font-sm); margin-bottom: var(--hr-space-2); }

.inv-usage-svcs {
    list-style: none;
    margin: 0 0 var(--hr-space-4);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--hr-space-1) var(--hr-space-4);
}

.inv-usage-svc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hr-space-2);
    padding: 6px 8px;
    border-radius: var(--hr-radius-sm);
    color: var(--hr-text-muted);
}

.inv-usage-svc.is-on { color: var(--hr-text); background: var(--hr-bg-subtle); }

.inv-usage-svc__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--hr-font-base);
    cursor: pointer;
    min-width: 0;
}

.inv-usage-svc__units { width: 72px; flex: none; }
.inv-usage-svc__units:disabled { opacity: 0.4; }

.inv-usage-new {
    font-size: var(--hr-font-xs);
    font-weight: 700;
    color: var(--hr-primary-strong);
    background: var(--hr-primary-soft);
    border-radius: var(--hr-radius-pill);
    padding: 1px 6px;
}

/* Unusual lately ------------------------------------------------------- */

.inv-usage-unusual {
    background: var(--hr-bg);
    border: 1px solid var(--hr-border);
    border-left: 3px solid var(--hr-status-reorder);
    border-radius: var(--hr-radius);
    padding: var(--hr-space-3) var(--hr-space-4);
    margin-bottom: var(--hr-space-4);
    font-size: var(--hr-font-base);
}

.inv-usage-unusual summary { cursor: pointer; }
.inv-usage-unusual > p { margin: var(--hr-space-2) 0 0; font-size: var(--hr-font-sm); }

.inv-usage-unusual__list {
    list-style: none;
    margin: var(--hr-space-3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--hr-space-1);
}

.inv-usage-unusual__row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 2fr auto;
    align-items: center;
    gap: var(--hr-space-3);
    width: 100%;
    text-align: left;
    border: 0;
    background: var(--hr-bg-subtle);
    border-radius: var(--hr-radius-sm);
    padding: 8px 10px;
    font: inherit;
    color: var(--hr-text);
    cursor: pointer;
}

.inv-usage-unusual__row:hover,
.inv-usage-unusual__row:focus-visible { background: var(--hr-bg-muted); }

.inv-usage-unusual__name  { font-weight: 600; }
.inv-usage-unusual__what  { font-size: var(--hr-font-sm); color: var(--hr-text-secondary); }
.inv-usage-unusual__ratio { font-weight: 700; color: var(--hr-status-reorder); white-space: nowrap; }

/* Mode ------------------------------------------------------------------ */

.inv-usage-mode { font-size: var(--hr-font-sm); margin: 0 0 var(--hr-space-3); }

.inv-usage-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--hr-space-2);
    margin-bottom: var(--hr-space-3);
}

.inv-usage-modeopt {
    display: flex;
    align-items: flex-start;
    gap: var(--hr-space-2);
    padding: var(--hr-space-3);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    cursor: pointer;
}

.inv-usage-modeopt.is-on { border-color: var(--hr-primary); background: var(--hr-primary-soft); }
.inv-usage-modeopt > span { display: flex; flex-direction: column; gap: 2px; font-size: var(--hr-font-base); }
.inv-usage-modeopt .inv-muted { font-size: var(--hr-font-sm); }

.inv-usage-setup__hint { font-size: var(--hr-font-sm); margin: 0 0 var(--hr-space-2); }

@media (max-width: 768px) {
    .inv-usage-field,
    .inv-usage-field .inv-select { width: 100%; }
    .inv-usage-controls .inv-segmented { overflow-x: auto; max-width: 100%; }
    .inv-usage-charts { grid-template-columns: 1fr; }
    .inv-usage-unusual__row { grid-template-columns: 1fr; gap: 2px; }
}