/* Density and typographic hierarchy for the admin panel.

   Filament's defaults render headings, field labels and column headers at
   weight 500-700 in near-black, so nothing recedes: the eye gets no anchor
   and the generous spacing reads as emptiness rather than breathing room.
   The rules below move hierarchy onto size and colour instead of weight.

   This is not a font problem. Measured on-page, Inter is within 4% on
   x-height of the other common UI sans faces and effectively identical in
   width, so swapping the typeface would change nothing.

   Panel settings Filament exposes as real APIs live in AdminPanelProvider
   (see ->sidebarWidth()). Everything here has no PHP equivalent: Filament's
   Size enum only varies padding and bottoms out at text-sm, so the 12px
   steps below cannot be expressed through ->size(). Sidebar spacing lives in
   navigation.css, which already owns those selectors. */

/* ---- Page frame -------------------------------------------------------- */

/* Filament frames every page with 32px of air: vertical around the header and
   content, horizontal down each side from 1024px up. That was proportionate to
   the old type sizes; with headings and labels a step smaller it reads as a
   gap rather than a margin. 24px holds the same relationship to the new sizes.

   Two different axes, deliberately kept together: they are one perceived
   frame, and letting them drift apart is what makes a page look lopsided. */
.fi-page-header-main-ctn {
    padding-block: calc(var(--spacing) * 6);
}

@media (min-width: 1024px) {
    .fi-main {
        padding-inline: calc(var(--spacing) * 6);
    }
}

/* ---- Tables ------------------------------------------------------------ */

/* Column headers ship at weight 600 in near-black, competing with the rows
   they label. They should recede so the data leads. */
.fi-ta-header-cell,
.fi-ta-header-cell-sort-btn {
    font-weight: 400;
    color: var(--color-gray-500);
}

:is(.dark .fi-ta-header-cell),
:is(.dark .fi-ta-header-cell-sort-btn) {
    color: var(--color-gray-400);
}

.fi-ta-header-cell,
.fi-ta-text,
.fi-ta-selection-cell {
    padding-block: calc(var(--spacing) * 2);
}

/* Panel and split layouts stack .fi-ta-text-item vertically, so the padding
   that suits a single table row compounds into 16px between every pair. */
.fi-ta-panel .fi-ta-text {
    padding-block: calc(var(--spacing) * 0.5);
}

/* The stacked label belongs to the mobile card layout but still occupies
   vertical space in the desktop table. */
@media (min-width: 1024px) {
    .fi-ta-cell-label {
        display: none;
    }
}

/* ---- Headings ---------------------------------------------------------- */

/* Page titles ship at 30px/700, which overpowers everything under them. */
.fi-header-heading {
    font-size: var(--text-2xl);
    line-height: calc(var(--spacing) * 8);
    font-weight: 600;
}

/* Section and table headings share one rule so they cannot drift apart: both
   ship at 16px/600 and a single form page can carry a dozen of them. */
.fi-section-header-heading,
.fi-ta-header-heading {
    font-size: var(--text-sm);
    line-height: calc(var(--spacing) * 5);
    font-weight: 500;
    color: var(--color-gray-700);
}

:is(.dark .fi-section-header-heading),
:is(.dark .fi-ta-header-heading) {
    color: var(--color-gray-200);
}

/* Mirror Filament's own scoping rather than overriding padding globally.

   Filament deliberately exempts `.fi-section-not-contained` — a section with no card
   chrome, used purely as a layout wrapper, most visibly around the dashboard's widget
   grid. An unscoped `.fi-section-content` rule re-pads those wrappers, which indented
   the whole stats row 16px past every section below it. The aside variant is excluded
   for the same reason Filament excludes it. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header,
.fi-ta-header {
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
}

.fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content,
.fi-section:not(.fi-section-not-contained).fi-divided > .fi-section-content-ctn > .fi-section-content > * {
    padding: calc(var(--spacing) * 4);
}

/* ---- Widgets ----------------------------------------------------------- */

/* Stat cards ship at p-6 while sections above are on 16px, so the dashboard's
   top row sat 8px looser than everything below it — visible as a step in the
   left edge where a card meets a section. */
.fi-wi-stats-overview-stat {
    padding: calc(var(--spacing) * 4);
}

/* ---- Form fields ------------------------------------------------------- */

/* The visible label text lives on an inner span that overrides the <label>,
   so the rule has to name both. */
.fi-fo-field-label,
.fi-fo-field-label-content {
    font-size: var(--text-xs);
    line-height: calc(var(--spacing) * 4);
    font-weight: 400;
    color: var(--color-gray-500);
}

:is(.dark .fi-fo-field-label),
:is(.dark .fi-fo-field-label-content) {
    color: var(--color-gray-400);
}

.fi-fo-field-label-col,
.fi-fo-field,
.fi-fo-field-content-col {
    gap: calc(var(--spacing) * 1);
}

/* Helper text must not outrank the label it explains. Scoped to the field
   column so standalone Text schema components keep their size. */
.fi-fo-field-content-col .fi-sc-text {
    font-size: var(--text-xs);
    line-height: calc(var(--spacing) * 4);
}

/* ---- Buttons ----------------------------------------------------------- */

/* Filament's fi-size-sm still renders text-sm, so this step has to be set
   directly rather than through ->size(Size::Small).

   The min-height keeps label-only buttons the same height as ones carrying an
   icon: the icon is taller than the 16px line box, so without a floor the two
   variants sit 4px apart in the same toolbar. */
.fi-btn {
    font-size: var(--text-xs);
    line-height: calc(var(--spacing) * 4);
    font-weight: 500;
    padding-block: calc(var(--spacing) * 1.5);
    min-height: calc(var(--spacing) * 8);
}