/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */



/* Equal height notification/insight cards */
.grid-equal-height > div { display: flex; }
.grid-equal-height > div > article { flex: 1; }

/* Sticky table headers (below the fixed app bar) */
/* BeerCSS sets overflow:hidden on main which blocks sticky — clip behaves the same but allows it */
main:has(.sticky-header) { overflow: clip; }
.sticky-header table thead th {
    position: sticky;
    top: 64px;
    z-index: 3;
    background-color: var(--surface-container-highest);
}

/* Compact currency selector */
.field.small-field { width: 7rem; flex-shrink: 0; }

:root,body.light {
    --primary:#5d7a99;
    --on-primary:#ffffff;
    --primary-container:#dce6f0;
    --on-primary-container:#1a2a3a;
    --secondary:#6b6873;
    --on-secondary:#ffffff;
    --secondary-container:#e8e4ed;
    --on-secondary-container:#252329;
    --tertiary:#7a6b6e;
    --on-tertiary:#ffffff;
    --tertiary-container:#f0e4e6;
    --on-tertiary-container:#2e2426;
    --error:#ba1a1a;
    --on-error:#ffffff;
    --error-container:#ffdad6;
    --on-error-container:#410002;
    --background:#ffffff;
    --on-background:#1a1c1e;
    --surface:#ffffff;
    --on-surface:#1a1c1e;
    --surface-variant:#f3ebec;
    --on-surface-variant:#43474e;
    --outline:#73777f;
    --outline-variant:#d4c4c7;
    --shadow:#000000;
    --scrim:#000000;
    --inverse-surface:#2f3033;
    --inverse-on-surface:#f1f0f4;
    --inverse-primary:#a8c4dc;
    --surface-dim:#e8dcde;
    --surface-bright:#fef9fa;
    --surface-container-lowest:#ffffff;
    --surface-container-low:#ffffff;
    --surface-container:#f8eff0;
    --surface-container-high:#f2e9ea;
    --surface-container-highest:#ece3e5;
}