/* ============================================================================
   GlideInventory — Bootstrap Compatibility Layer
   ----------------------------------------------------------------------------
   Implements, in the project's own design language, the exact subset of
   Bootstrap classes the markup actually uses — so bootstrap.min.css (233 KB)
   can be unlinked without touching 30 identity pages and ~200 admin call
   sites.

   The subset was derived, not guessed: every class token in every .razor file
   was intersected with every class Bootstrap defines (99 hits), then filtered
   to those our own sheets did not already cover (70). Those 70 are below,
   plus full definitions for card / alert / btn / row / container, which
   theme-compat.css only ever recoloured — Bootstrap supplied their structure.

   Everything reads from tokens, so all of it themes. Two deliberate
   departures from Bootstrap's behaviour, both toward the redesign:

     .form-floating  becomes a static label above the input rather than a
                     label that animates into the border. The markup order
                     (input, then label) is preserved and re-ordered with
                     flex `order`, so no page markup changes.
     .row / .col-*   become CSS Grid spans instead of float-era percentage
                     widths with negative margins and gutter padding. Same
                     12-column semantics, far fewer edge cases.

   Depends on: tokens.css, primitives.css
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Grid — 12 columns. Breakpoints match Bootstrap 5: md 768, lg 992, xl 1200.
   --------------------------------------------------------------------------- */
.row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--g-space-4);
}

.row > * {
    grid-column: span 12;
    min-width: 0;
}

.container,
.container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--g-space-4);
}

.container {
    max-width: 1140px;
}

.col-12 { grid-column: span 12; }

@media (min-width: 768px) {
    .col-md-4  { grid-column: span 4; }
    .col-md-6  { grid-column: span 6; }
    .col-md-12 { grid-column: span 12; }
}

@media (min-width: 992px) {
    .col-lg-3 { grid-column: span 3; }
    .col-lg-4 { grid-column: span 4; }
    .col-lg-6 { grid-column: span 6; }
    .col-lg-9 { grid-column: span 9; }
}

@media (min-width: 1200px) {
    .col-xl-4 { grid-column: span 4; }
    .col-xl-6 { grid-column: span 6; }
    .col-xl-8 { grid-column: span 8; }
}

/* row-cols-* — equal-width auto columns */
.row-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-cols-2 > * { grid-column: auto; }

@media (min-width: 992px) {
    .row-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .row-cols-lg-4 > * { grid-column: auto; }
}

/* Gutter utilities */
.g-2 { gap: var(--g-space-2); }
.g-3 { gap: var(--g-space-3); }
.g-4 { gap: var(--g-space-4); }

/* ---------------------------------------------------------------------------
   Flex & display utilities
   --------------------------------------------------------------------------- */
.d-flex { display: flex; }
.d-grid { display: grid; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: var(--g-space-2); }
.gap-3 { gap: var(--g-space-3); }
.h-100 { height: 100%; }
.w-100 { width: 100%; }

@media (min-width: 992px) {
    .flex-lg-row { flex-direction: row; }
    .align-items-lg-start { align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   Spacing utilities (Bootstrap's 0.25rem scale, mapped to tokens)
   --------------------------------------------------------------------------- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--g-space-1); }
.mt-4 { margin-top: var(--g-space-5); }
.p-3  { padding: var(--g-space-4); }
.p-4  { padding: var(--g-space-5); }
.py-4 { padding-block: var(--g-space-5); }

/* ---------------------------------------------------------------------------
   Typography utilities
   --------------------------------------------------------------------------- */
.fs-4 { font-size: var(--g-text-lg); }
.fw-semibold { font-weight: 600; }
.small { font-size: var(--g-text-sm); }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }

.h4 {
    font-size: var(--g-text-lg);
    font-weight: 640;
    letter-spacing: -0.02em;
    margin: 0;
}

.h6 {
    font-size: var(--g-text-base);
    font-weight: 620;
    margin: 0;
}

.text-muted   { color: var(--g-text-muted); }
.text-danger  { color: var(--g-alert); }
.text-success { color: var(--g-live); }
.text-info    { color: var(--g-info); }

/* ---------------------------------------------------------------------------
   Decoration utilities
   --------------------------------------------------------------------------- */
.border   { border: 1px solid var(--g-border); }
.border-0 { border: 0; }
.rounded-3 { border-radius: var(--g-radius-md); }
.shadow-sm { box-shadow: var(--g-shadow-1); }
.bg-body-tertiary { background: var(--g-surface-2); }

.text-bg-light {
    background: var(--g-surface-2);
    color: var(--g-text);
}

.text-bg-warning {
    background: var(--g-hold-wash);
    color: var(--g-hold);
}

/* ---------------------------------------------------------------------------
   Card — theme-compat.css recolours it; Bootstrap supplied the structure.
   --------------------------------------------------------------------------- */
.card {
    display: flex;
    flex-direction: column;
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    overflow: hidden;
}

.card-body {
    padding: var(--g-space-4);
    flex: 1;
}

/* ---------------------------------------------------------------------------
   Alert — theme-compat.css supplies the tonal variants.
   --------------------------------------------------------------------------- */
.alert {
    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);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.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 var(--g-border-strong);
    background: var(--g-surface);
    color: var(--g-text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover:not(:disabled) { background: var(--g-surface-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

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

.btn-link {
    border-color: transparent;
    background: transparent;
    color: var(--g-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding-inline: var(--g-space-1);
}

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

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

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

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

/* Solid semantic buttons — moved here when theme-compat.css was retired in
   Phase 05. They are the last of that bridge still reached by live markup. */
.btn-primary {
    background: var(--g-accent);
    border-color: var(--g-accent);
    color: var(--g-accent-ink);
}

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

.btn-secondary {
    background: var(--g-surface-2);
    border-color: var(--g-border);
    color: var(--g-text);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--g-surface-3);
}

.btn-danger {
    background: var(--g-alert);
    border-color: var(--g-alert);
    color: #fff;
}

.btn-success {
    background: var(--g-live);
    border-color: var(--g-live);
    color: #fff;
}

/* Alert tonal variants */
.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);
}

.alert-danger,
.alert-error {
    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);
}

.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);
}

.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);
}

/* Legacy card alias still used by a few admin pages */
.admin-card {
    display: flex;
    flex-direction: column;
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.form-control,
.form-select {
    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;
}

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

.form-control::placeholder { color: var(--g-text-subtle); }
.form-control:disabled,
.form-select:disabled {
    background: var(--g-surface-2);
    color: var(--g-text-subtle);
    cursor: not-allowed;
}

.form-label {
    font-size: var(--g-text-sm);
    font-weight: 550;
    color: var(--g-text);
    margin: 0;
}

/* `form-group` is Bootstrap 4 syntax with no rule in Bootstrap 5, so the 58
   call sites using it have been rendering unstyled. It now behaves as the
   field wrapper the markup always assumed it was. */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1);
    margin-bottom: var(--g-space-4);
}

/* Static label above the input. Markup order is <input> then <label>, so the
   label is pulled ahead with `order` rather than animated into the border. */
.form-floating {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1);
}

.form-floating > label {
    order: -1;
    font-size: var(--g-text-sm);
    font-weight: 550;
    color: var(--g-text);
}

.form-check {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
}

.form-check-input {
    width: 15px;
    height: 15px;
    accent-color: var(--g-accent);
    flex: none;
    margin: 0;
}

.form-check-label {
    font-size: var(--g-text-base);
    color: var(--g-text);
}

.input-group {
    display: flex;
    align-items: stretch;
}

.input-group > .form-control {
    border-radius: var(--g-radius-sm) 0 0 var(--g-radius-sm);
}

.input-group > .form-control:not(:first-child) {
    border-left: 0;
}

.input-group-text {
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    font-size: var(--g-text-base);
    color: var(--g-text-muted);
    background: var(--g-surface-2);
    border: 1px solid var(--g-border-strong);
    border-left: 0;
    border-radius: 0 var(--g-radius-sm) var(--g-radius-sm) 0;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Nav pills
   --------------------------------------------------------------------------- */
.nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item { display: flex; }

.nav-pills .nav-link {
    padding: 7px 13px;
    border-radius: var(--g-radius-sm);
    font-size: var(--g-text-base);
    color: var(--g-text-muted);
    text-decoration: none;
}

.nav-pills .nav-link:hover { background: var(--g-surface-2); color: var(--g-text); }

.nav-pills .nav-link.active {
    background: var(--g-accent);
    color: var(--g-accent-ink);
}

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

.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;
}

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

.table-sm th,
.table-sm td { padding: 6px 10px; }

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.align-middle { vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
    .btn,
    .form-control,
    .form-select {
        transition: none;
    }
}