/* ============================================================================
   GlideInventory — Primitives
   ----------------------------------------------------------------------------
   The shared component vocabulary. Every rule reads colour from tokens.css;
   none declares a literal colour, so all of it themes for free.

   Prefix: g-
   Depends on: tokens.css (must be linked first)

   These six primitives cover the Bootstrap usage measured in the audit:
     .g-field  → form-control / form-floating / form-label / form-group (×162)
     .g-btn    → btn / btn-primary / btn-secondary / btn-danger  (×85)
     .g-table  → table / table-striped                            (×31)
     .g-card   → card / card-body / card-header                   (×6)
     .g-alert  → alert / alert-*                                  (×22)
     .g-chip   → badge + the sync-state primitive
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
.g-mono,
.g-num {
    font-family: var(--g-font-data);
    font-variant-numeric: tabular-nums;
}

/* Any container of aligned digits. Applied to table numerics by default. */
.g-tabular {
    font-variant-numeric: tabular-nums;
}

/* Uppercase micro-label. */
.g-eyebrow {
    font-family: var(--g-font-data);
    font-size: var(--g-text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--g-text-subtle);
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   1. Chip — sync state. The identity primitive.
      State is carried by colour AND a dot AND a word, so it survives
      greyscale printing and colour-vision deficiency.
   --------------------------------------------------------------------------- */
.g-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-1);
    font-family: var(--g-font-data);
    font-size: var(--g-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px 3px 7px;
    border-radius: var(--g-radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
}

.g-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* Dotless variant for non-state labels (counts, categories). */
.g-chip--plain::before {
    display: none;
}

.g-chip--live {
    color: var(--g-live);
    background: var(--g-live-wash);
    border-color: color-mix(in srgb, var(--g-live) 26%, transparent);
}

.g-chip--hold {
    color: var(--g-hold);
    background: var(--g-hold-wash);
    border-color: color-mix(in srgb, var(--g-hold) 26%, transparent);
}

.g-chip--offline {
    color: var(--g-alert);
    background: var(--g-alert-wash);
    border-color: color-mix(in srgb, var(--g-alert) 26%, transparent);
}

.g-chip--info {
    color: var(--g-info);
    background: var(--g-info-wash);
    border-color: color-mix(in srgb, var(--g-info) 26%, transparent);
}

.g-chip--neutral {
    color: var(--g-text-muted);
    background: var(--g-surface-2);
    border-color: var(--g-border);
}

/* ---------------------------------------------------------------------------
   2. Button
   --------------------------------------------------------------------------- */
.g-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-2);
    font-family: var(--g-font-ui);
    font-size: var(--g-text-base);
    font-weight: 560;
    line-height: 1.4;
    padding: 9px 16px;
    border-radius: var(--g-radius-sm);
    border: 1px solid transparent;
    background: var(--g-accent);
    color: var(--g-accent-ink);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.g-btn:hover:not(:disabled) {
    background: var(--g-accent-hover);
    color: var(--g-accent-ink);
}

.g-btn:disabled,
.g-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.g-btn--ghost {
    background: transparent;
    color: var(--g-text);
    border-color: var(--g-border-strong);
}

.g-btn--ghost:hover:not(:disabled) {
    background: var(--g-surface-2);
    color: var(--g-text);
}

.g-btn--danger {
    background: transparent;
    color: var(--g-alert);
    border-color: color-mix(in srgb, var(--g-alert) 45%, transparent);
}

.g-btn--danger:hover:not(:disabled) {
    background: var(--g-alert-wash);
    color: var(--g-alert);
}

.g-btn--sm {
    font-size: var(--g-text-sm);
    padding: 6px 12px;
}

.g-btn--lg {
    font-size: var(--g-text-md);
    padding: 12px 22px;
}

/* ---------------------------------------------------------------------------
   3. Field — the Bootstrap form replacement
   --------------------------------------------------------------------------- */
.g-field {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1);
}

.g-field > label,
.g-label {
    font-size: var(--g-text-sm);
    font-weight: 550;
    color: var(--g-text);
}

.g-input,
.g-field input:not([type="checkbox"]):not([type="radio"]),
.g-field select,
.g-field textarea {
    font-family: var(--g-font-ui);
    font-size: var(--g-text-base);
    color: var(--g-text);
    background: var(--g-surface);
    border: 1px solid var(--g-border-strong);
    border-radius: var(--g-radius-sm);
    padding: 9px 12px;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.g-input::placeholder,
.g-field input::placeholder,
.g-field textarea::placeholder {
    color: var(--g-text-subtle);
}

.g-input:focus,
.g-field input:focus,
.g-field select:focus,
.g-field textarea:focus {
    outline: none;
    border-color: var(--g-accent);
    box-shadow: 0 0 0 3px var(--g-focus-ring);
}

/* Keys, SKUs and quantities read as data, not prose. */
.g-input--data {
    font-family: var(--g-font-data);
    font-variant-numeric: tabular-nums;
}

.g-input:disabled,
.g-field input:disabled,
.g-field select:disabled,
.g-field textarea:disabled {
    background: var(--g-surface-2);
    color: var(--g-text-subtle);
    cursor: not-allowed;
}

.g-input--invalid,
.g-field .invalid {
    border-color: var(--g-alert);
}

.g-help {
    font-size: var(--g-text-sm);
    color: var(--g-text-subtle);
}

.g-help--error {
    color: var(--g-alert);
}

/* ---------------------------------------------------------------------------
   4. Card
   --------------------------------------------------------------------------- */
.g-card {
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    overflow: hidden;
}

.g-card__header {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    padding: var(--g-space-3) var(--g-space-4);
    border-bottom: 1px solid var(--g-border);
}

.g-card__header h2,
.g-card__header h3,
.g-card__header h4 {
    margin: 0;
    font-size: var(--g-text-base);
    font-weight: 640;
}

.g-card__body {
    padding: var(--g-space-4);
}

/* ---------------------------------------------------------------------------
   5. Table
   --------------------------------------------------------------------------- */
.g-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    background: var(--g-surface);
}

.g-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--g-text-base);
}

.g-table th {
    text-align: left;
    font-family: var(--g-font-data);
    font-size: var(--g-text-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--g-text-subtle);
    font-weight: 500;
    padding: 10px 14px;
    border-bottom: 1px solid var(--g-border);
    background: var(--g-surface-2);
    white-space: nowrap;
}

.g-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--g-border);
    color: var(--g-text-muted);
}

.g-table tbody tr:last-child td {
    border-bottom: 0;
}

.g-table tbody tr:hover td {
    background: var(--g-surface-2);
}

/* Identifiers and quantities */
.g-table td.g-td-key {
    font-family: var(--g-font-data);
    font-variant-numeric: tabular-nums;
    color: var(--g-text);
}

.g-table td.g-td-num {
    font-family: var(--g-font-data);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--g-text);
}

/* Severity rail — marks rows needing attention without tinting the whole
   row, which collides with hover and selection and wrecks long tables. */
.g-table tr.g-row--hold td:first-child {
    box-shadow: inset 2px 0 0 var(--g-hold);
}

.g-table tr.g-row--alert td:first-child {
    box-shadow: inset 2px 0 0 var(--g-alert);
}

/* ---------------------------------------------------------------------------
   6. Alert
   --------------------------------------------------------------------------- */
.g-alert {
    display: flex;
    gap: var(--g-space-3);
    align-items: flex-start;
    padding: var(--g-space-3) var(--g-space-4);
    border: 1px solid var(--g-border);
    border-left-width: 2px;
    border-radius: var(--g-radius-sm);
    background: var(--g-surface-2);
    color: var(--g-text-muted);
    font-size: var(--g-text-base);
}

.g-alert strong {
    color: var(--g-text);
}

.g-alert--success {
    background: var(--g-live-wash);
    border-color: color-mix(in srgb, var(--g-live) 30%, transparent);
    border-left-color: var(--g-live);
    color: var(--g-live);
}

.g-alert--warning {
    background: var(--g-hold-wash);
    border-color: color-mix(in srgb, var(--g-hold) 30%, transparent);
    border-left-color: var(--g-hold);
    color: var(--g-hold);
}

.g-alert--danger {
    background: var(--g-alert-wash);
    border-color: color-mix(in srgb, var(--g-alert) 30%, transparent);
    border-left-color: var(--g-alert);
    color: var(--g-alert);
}

.g-alert--info {
    background: var(--g-info-wash);
    border-color: color-mix(in srgb, var(--g-info) 30%, transparent);
    border-left-color: var(--g-info);
    color: var(--g-info);
}

/* ---------------------------------------------------------------------------
   Focus — one visible treatment for every interactive element
   --------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--g-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .g-btn,
    .g-input,
    .g-field input,
    .g-field select,
    .g-field textarea {
        transition: none;
    }
}