/* ============================================================
 * Shared stylesheet (#681): rules that were copied three times as scoped CSS. GLOBAL, loaded from
 * App.razor after app.css, so a page or dialog uses the classes without its own copy.
 *
 *   1. admin-table  — the admin roster pages (/admin/feeds, /admin/partners, /admin/manufacturers):
 *                     search box, inline "+ New", the table's head and row grid shell, name and sub
 *                     text, icon buttons, the empty row and the note. Each page keeps only its own
 *                     column template (grid-template-columns) and the cells only it has.
 *   2. admin-form   — the add / edit modal form on those pages.
 *   3. cg-form      — the in-dialog form fields (design-system.html, "in-dialog form-field pattern"):
 *                     ConsumableEditModal, ConsumableSwapModal, PartEditorModal, MarkServicedModal and
 *                     ReplacePartModal. Reuse these for any new in-modal form.
 * ============================================================ */

/* ── 1. Admin table ───────────────────────────────────────────────────── */

.admin-table__muted { color: var(--tt-ink-4); font-size: var(--tt-text-sm); }

/* Compact primary CTA that lives inline in the toolbar, right of the search box. */
.admin-table__new {
    flex: none;
    height: 34px;
    padding: 0 var(--tt-s-12);
    font-size: var(--tt-text-sm);
    white-space: nowrap;
}

.admin-table__search {
    display: flex;
    align-items: center;
    gap: var(--tt-s-8);
    width: 240px;
    max-width: 100%;
    padding: var(--tt-s-6) var(--tt-s-10);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    color: var(--tt-ink-4);
}

.admin-table__search-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--tt-text-sm); color: var(--tt-ink-1); }

/* The head and each row: the page adds its own class carrying grid-template-columns. */
.admin-table__grid {
    display: grid;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-10) var(--tt-s-16);
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.admin-table__thead {
    background: var(--tt-surface-1);
    font-size: 10.5px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tt-ink-4);
}

.admin-table__row { font-size: var(--tt-text-sm); color: var(--tt-ink-2); }

.admin-table__c { text-align: center; }
.admin-table__r { text-align: right; }

.admin-table__txt { min-width: 0; }
.admin-table__name { font-size: 13.5px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-table__sub { font-size: 11px; color: var(--tt-ink-4); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-table__actions { display: flex; gap: var(--tt-s-6); justify-content: flex-end; }

.admin-table__icon-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: var(--tt-border-w) solid var(--tt-line-soft);
    background: var(--tt-surface-0);
    border-radius: var(--tt-radius-4);
    color: var(--tt-ink-3);
    cursor: pointer;
}

.admin-table__icon-btn:hover:not(:disabled) { background: var(--tt-surface-1); }
.admin-table__icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-table__icon-btn--danger { color: var(--tt-cta); }

.admin-table__empty { padding: var(--tt-s-32) var(--tt-s-16); text-align: center; font-size: var(--tt-text-sm); color: var(--tt-ink-4); border-top: var(--tt-border-w) solid var(--tt-line-soft); }

.admin-table__note {
    margin: var(--tt-s-12) 0 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
}

/* ── 2. Admin add / edit form ─────────────────────────────────────────── */

.admin-form { display: flex; flex-direction: column; gap: var(--tt-s-14); }
.admin-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tt-s-14); }
.admin-form__field { display: flex; flex-direction: column; }
.admin-form__label { font-size: var(--tt-text-xs); font-weight: var(--tt-weight-semibold); color: var(--tt-ink-3); margin-bottom: var(--tt-s-4); }

.admin-form__input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--tt-s-8) var(--tt-s-10);
    font-family: inherit;
    font-size: var(--tt-text-sm);
    color: var(--tt-ink-1);
    background: var(--tt-surface-0);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    outline: none;
}

.admin-form__hint { margin-top: var(--tt-s-4); font-size: 11px; color: var(--tt-ink-4); }
.admin-form__error { margin: 0; font-size: var(--tt-text-sm); color: var(--tt-cta); }
.admin-form__check { display: flex; align-items: flex-start; gap: var(--tt-s-8); font-size: var(--tt-text-sm); color: var(--tt-ink-2); margin-top: var(--tt-s-6); }

/* ── 3. In-dialog form fields (cg-form) ───────────────────────────────── */

.cg-form { display: flex; flex-direction: column; gap: var(--tt-s-14); }
.cg-form--compact { margin-bottom: var(--tt-s-4); }

/* Two or three rows side by side; each row is flex:1, so the split needs no column count. */
.cg-form__split { display: flex; gap: var(--tt-s-12); }

.cg-form__row { display: flex; flex-direction: column; gap: var(--tt-s-4); flex: 1; min-width: 0; }

/* padding:0 because a fieldset's <legend> takes this class too. */
.cg-form__label {
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tt-ink-3);
    padding: 0;
}

.cg-form__input {
    font: inherit;
    font-size: 13px;
    padding: 7px var(--tt-s-10);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    background: var(--tt-surface-0);
    color: var(--tt-ink-1);
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

.cg-form__input:focus { border-color: var(--tt-primary); box-shadow: var(--tt-shadow-focus); }
.cg-form__input:disabled { background: var(--tt-surface-1); color: var(--tt-ink-4); }
textarea.cg-form__input { resize: vertical; }

/* A currency symbol on a ledge, hairline-separated from the value. */
.cg-form__money {
    display: flex;
    align-items: stretch;
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-4);
    overflow: hidden;
}

.cg-form__money .cg-form__input { border: none; border-radius: 0; flex: 1; min-width: 0; width: auto; }
.cg-form__money .cg-form__input:focus { box-shadow: none; }
.cg-form__money:focus-within { border-color: var(--tt-primary); box-shadow: var(--tt-shadow-focus); }

.cg-form__currency-sym {
    display: flex;
    align-items: center;
    padding: 0 var(--tt-s-8);
    background: var(--tt-surface-2);
    border-right: var(--tt-border-w) solid var(--tt-line);
    font-size: 13px;
    color: var(--tt-ink-3);
    user-select: none;
    white-space: nowrap;
}

/* A group of choices: a fieldset whose legend is a cg-form__label. */
.cg-form__set { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tt-s-8); min-width: 0; }
.cg-form__set > .cg-form__label { margin-bottom: var(--tt-s-6); }

.cg-form__radio,
.cg-form__check { display: flex; align-items: center; gap: var(--tt-s-8); font-size: 13px; color: var(--tt-ink-1); }

/* A full-width inline choice outside the field grid (the swap dialog's). */
.cg-form__check-row { display: flex; align-items: center; gap: var(--tt-s-8); font-size: 13px; color: var(--tt-ink-2); cursor: pointer; }

/* An input that belongs to the radio above it. */
.cg-form__indent { margin-left: var(--tt-s-24); width: calc(100% - var(--tt-s-24)); }

.cg-form__hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--tt-ink-4); }
.cg-form__msg { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tt-ink-2); }
.cg-form__error { margin: 0; font-size: 13px; color: var(--tt-cta); }

.cg-form__rule { height: var(--tt-border-w); background: var(--tt-line); margin: var(--tt-s-4) 0; }
.cg-form__legend { font-size: 14px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); padding: 0; margin-bottom: var(--tt-s-4); }