/*
 * Admin density pass (build-free, loaded via AdminPanelProvider renderHook).
 *
 * Filament sizes nearly everything in rem, so scaling the root font-size shrinks
 * text AND padding/spacing together — the whole back-office gets more compact
 * without breaking layout. Tweak the ONE number below to taste:
 *   100% = Filament default · 90% = noticeably tighter · 85% = very dense.
 */
:root {
    font-size: 90% !important; /* ~14.4px base (browser default is 16px) */
}

/* Extra trim on the areas that feel the most padded, on top of the global
 * scale above. These are stable Filament 3 classes; if a future upgrade renames
 * one, the rule simply no-ops (no breakage). */

/* --- List pages / tables (the bulkiest screens) --- */

/* Tighter row height. The real vertical padding lives on the INNER content
 * wrapper (Filament gives it Tailwind `py-4` ≈ 29px), not on .fi-ta-cell — so
 * we target that wrapper. The `.fi-ta-cell .py-4` rule also catches the checkbox
 * and action cells, which use the same utility. */
.fi-ta-text,
.fi-ta-cell .py-4,
.fi-ta-actions {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}
.fi-ta-header-cell {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

/* Smaller thumbnails in table image columns (was ~2.5rem, the main row-height driver) */
.fi-ta-image,
.fi-ta-image img,
.fi-ta-cell img {
    height: 1.75rem !important;
    width: 1.75rem !important;
}

/* Slimmer toolbar above the table (search / column toggle / filters) */
.fi-ta-header-toolbar {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* --- Page chrome (this is where most of the empty space lives) --- */

/* Slimmer topbar (was h-16 / ~58px — uses a fixed height, so override height) */
.fi-topbar nav {
    height: 3rem !important;
    min-height: 3rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* Smaller page heading + much less gap above/below it */
.fi-header {
    margin-bottom: 0.5rem !important;
    gap: 0.25rem !important;
}
.fi-header-heading {
    font-size: 1.25rem !important;
}

/* Trim the generous gutter around page content (top band before the table) */
.fi-main {
    padding-top: 0.6rem !important;
    padding-bottom: 0.9rem !important;
    row-gap: 0.5rem !important;
}

/* The page content wrapper has `py-8` + `gap-y-8` (≈29px each) — the single
 * biggest source of the empty band between the header and the table. */
.fi-page {
    gap: 0.5rem !important;
}
.fi-page > div {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    row-gap: 0.6rem !important;
}

/* --- Tables: make horizontal scroll obvious & always reachable ---
 * Filament already sets overflow-x:auto on .fi-ta-content, but the scrollbar is
 * thin/auto-hidden and lives at the very bottom of the table, so wide tables
 * (e.g. the activity log's Changes column) look cut off and users miss that they
 * can scroll. Force an always-visible, easy-to-grab horizontal scrollbar. */
.fi-ta-content {
    overflow-x: auto !important;
    scrollbar-width: thin !important;            /* Firefox */
    scrollbar-color: rgba(100, 116, 139, 0.6) transparent;
}
.fi-ta-content::-webkit-scrollbar {
    height: 11px;                                  /* Chromium / Edge / Safari */
}
.fi-ta-content::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.55);
    border-radius: 9999px;
}
.fi-ta-content::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.8);
}
.fi-ta-content::-webkit-scrollbar-track {
    background: transparent;
}

/* Mirrored TOP horizontal scrollbar (built by public/js/admin-table-scroll.js).
 * Sits just above the table header and scrolls the same content, so you don't
 * have to scroll to the bottom of a long table to pan columns sideways. */
.fi-ta-top-scroll {
    display: none;                                  /* JS shows it only when scrollable */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;                          /* Firefox */
    scrollbar-color: rgba(100, 116, 139, 0.6) transparent;
}
.fi-ta-top-scroll-inner {
    height: 1px;
}
.fi-ta-top-scroll::-webkit-scrollbar {
    height: 11px;                                   /* Chromium / Edge / Safari */
}
.fi-ta-top-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.55);
    border-radius: 9999px;
}
.fi-ta-top-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.8);
}
.fi-ta-top-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* --- Forms --- */

/* Section card padding */
.fi-section-content {
    padding: 0.875rem !important;
}

/* The main lever: vertical gap between form fields (was 1.5rem / ~22px) */
.fi-fo-component-ctn {
    gap: 0.75rem !important;
}

/* Tighter gap between a field's label, input, and helper text */
.fi-fo-field-wrp {
    gap: 0.2rem !important;
}

/* Trim the gap between stacked sections (e.g. main fields → Variations) */
.fi-form {
    gap: 0.75rem !important;
}