/* FAI-P07-04..09 鈥� Shared admin console primitives (UI_UX_PLAN 搂7): dense tables, form fields
   and status chips reused by every /admin screen. Global (not isolated) because the console is
   ten pages of the same shapes; page-specific styles stay in each page's razor.css. Everything
   rides the --fai-* tokens and the .fai-compact density the AdminLayout applies. */

/* --- Data tables (搂7.4/搂7.9 鈥� the console's default layout) --- */
.admx-table-wrap {
    overflow-x: auto;
}

.admx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fai-density-text);
}

.admx-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 12px;
    text-align: start;
    font-size: var(--fai-text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fai-ink-3);
    background: var(--fai-surface);
    border-bottom: 1px solid var(--fai-border-strong);
    white-space: nowrap;
}

.admx-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--fai-border);
    color: var(--fai-ink-2);
    vertical-align: middle;
}

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

.admx-table .fai-numeric {
    font-variant-numeric: tabular-nums;
}

/* --- Status / meta chips --- */
.admx-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 10px;
    border-radius: var(--fai-radius-pill);
    font-size: var(--fai-text-xs);
    font-weight: 600;
    background: var(--fai-surface-2);
    color: var(--fai-ink-2);
    border: 1px solid var(--fai-border);
    white-space: nowrap;
}

.admx-status-draft { background: var(--fai-surface-3); color: var(--fai-ink-2); }
.admx-status-published { background: var(--fai-info-soft); color: var(--fai-info); border-color: transparent; }
.admx-status-live { background: var(--fai-success-soft); color: var(--fai-success); border-color: transparent; }
.admx-status-archived { background: var(--fai-surface-2); color: var(--fai-ink-3); }
.admx-status-valid { background: var(--fai-success-soft); color: var(--fai-success); border-color: transparent; }
.admx-status-duplicate { background: var(--fai-warning-soft); color: var(--fai-warning); border-color: transparent; }
.admx-status-invalid { background: var(--fai-danger-soft); color: var(--fai-danger); border-color: transparent; }
.admx-status-warning { background: var(--fai-warning-soft); color: var(--fai-warning); border-color: transparent; }
.admx-status-info { background: var(--fai-info-soft); color: var(--fai-info); border-color: transparent; }
.admx-status-active { background: var(--fai-success-soft); color: var(--fai-success); border-color: transparent; }
.admx-status-inactive { background: var(--fai-surface-2); color: var(--fai-ink-3); }

.admx-meta {
    display: block;
    font-size: var(--fai-text-xs);
    color: var(--fai-ink-3);
}

/* --- Form fields (sheet editors, filters) --- */
.admx-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.admx-label {
    font-size: var(--fai-text-xs);
    font-weight: 600;
    color: var(--fai-ink-2);
}

.admx-input,
.admx-select,
.admx-textarea {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    font-family: var(--fai-font-body);
    font-size: var(--fai-text-sm);
    color: var(--fai-ink);
    background: var(--fai-surface);
    border: 1px solid var(--fai-border-strong);
    border-radius: var(--fai-radius-sm);
    transition: border-color var(--fai-motion-fast) var(--fai-ease),
        box-shadow var(--fai-motion-fast) var(--fai-ease);
}

.admx-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: var(--fai-font-mono);
    font-size: var(--fai-text-xs);
    line-height: 1.5;
}

.admx-input:focus,
.admx-select:focus,
.admx-textarea:focus {
    outline: none;
    border-color: var(--fai-primary-line);
    box-shadow: var(--fai-focus-ring);
}

.admx-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admx-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

/* --- Filter row (search + facet selects) --- */
.admx-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admx-filters .admx-input,
.admx-filters .admx-select {
    width: auto;
    min-width: 140px;
}

/* --- Error banner --- */
.admx-error {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--fai-radius-sm);
    background: var(--fai-danger-soft);
    border: 1px solid var(--fai-border);
    color: var(--fai-danger);
    font-size: var(--fai-text-sm);
}

/* --- Paginator --- */
.admx-pager {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    padding: 8px 12px;
    border-top: 1px solid var(--fai-border);
    font-size: var(--fai-text-sm);
    color: var(--fai-ink-3);
}

/* FAI-P07-06 � Full-bleed floor-plan editor (/admin/venue): pages hosting the editor (.fpe)
   unlock the app shell's reading-width cap (scoped .shell-content max-width 1160 + .adm
   max-width 1400) so the canvas gets the full viewport width. The extra .shell /
   .shell-content compound outranks those scoped rules in the cascade. */
.shell .shell-content:has(.fpe) {
    max-width: none;
    padding-inline: var(--fai-space-4);
}

.shell-content .adm:has(.fpe) {
    max-width: none;
}

/* ============================================================================
   FAI-P12-05 — the dense flavor's signature (ADR-0008): the sticky table header
   carries the same 2px gradient strip the tabs and page headers wear, and rows
   gain the primary edge accent on hover. Compact density unchanged (32px rows,
   13px text); high-contrast flattens the decoration per the ADR's exemption.
   ========================================================================== */
.admx-table th {
    background-image: var(--fai-grad-hero);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: bottom;
}

[data-fai-theme="high-contrast"] .admx-table th {
    background-image: none;
}

.admx-table tbody tr {
    transition:
        background-color var(--fai-motion-fast) var(--fai-ease),
        box-shadow var(--fai-motion-fast) var(--fai-ease);
}

.admx-table tbody tr:hover {
    background: var(--fai-surface-2);
    box-shadow: inset 3px 0 0 0 var(--fai-primary);
}