/* Global UI rules and utilities for consistent pages */

:root{
  /* Updated at runtime by JS for accurate header height */
  --header-height: 82px;
  --container-gutter: 16px;
}

/* Ensure page content isn't hidden under the fixed top header */
.page-safe-top, .safe-top, .content-safe-top {
  padding-top: var(--header-height);
}

/* Common page container helpers */
.container-page{
  padding-left: var(--container-gutter);
  padding-right: var(--container-gutter);
}
@media(min-width:1200px){
  .container-page{ max-width: 1140px; margin-left:auto; margin-right:auto; }
}

/* Responsive visibility helpers */
.hide-on-mobile{ display:block; }
.show-on-mobile{ display:none; }
@media(max-width: 767.98px){
  .hide-on-mobile{ display:none !important; }
  .show-on-mobile{ display:block !important; }
}

/* Spacing scale (margin utilities) */
.m-0{margin:0!important}.mt-1{margin-top:4px!important}.mb-1{margin-bottom:4px!important}
.mt-2{margin-top:8px!important}.mb-2{margin-bottom:8px!important}
.mt-3{margin-top:12px!important}.mb-3{margin-bottom:12px!important}
.mt-4{margin-top:16px!important}.mb-4{margin-bottom:16px!important}
.mt-5{margin-top:24px!important}.mb-5{margin-bottom:24px!important}

/* Simple grid gap helpers */
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:24px}

/* Card base (can be extended per page) */
.card-base{
  background:#fff; border:1px solid #eee; border-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.04);
}

/* Safe area for sticky footer bars if used in future */
.safe-bottom{ padding-bottom: 64px; }