/* components.css — reusable UI bits */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width: 991.98px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 575.98px){ .stat-grid{grid-template-columns:1fr;} }
.timeline{border-left:2px solid rgba(0,0,0,.08); padding-left:16px;}
.timeline-item{position:relative; padding-bottom:16px;}
.timeline-item::before{content:""; position:absolute; left:-23px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--ems-blue);}
.qr-card img{max-width:220px; image-rendering:pixelated;}
.filter-bar{display:flex; gap:8px; flex-wrap:wrap;}
/* Tab bars with several tabs (e.g. asset detail's 5 tabs) wrap into a ragged, uneven
   grid on narrow phones with Bootstrap's default nav-tabs. A single horizontally
   swipeable row reads much cleaner than a wrapped grid with dangling gaps. */
@media (max-width: 767.98px){
  .nav-tabs{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;}
  .nav-tabs .nav-link{white-space:nowrap;}
}
.empty-state{padding:40px; text-align:center; color:var(--ems-muted);}
.sticky-mobile-actions{position:sticky; bottom:calc(64px + env(safe-area-inset-bottom)); background:var(--ems-card); padding:12px 0; margin-top:8px; z-index:10; border-top:1px solid rgba(0,0,0,.06);}
@media (min-width: 992px){ .sticky-mobile-actions{position:static; border:0; padding:0;}}

/* Page header rows (title + action buttons) — every module view uses this same
   d-flex justify-content-between pattern. On narrow phones the title and button
   group were squeezing onto one row, wrapping both into unreadable slivers. */
@media (max-width: 575.98px){
  .content .d-flex.justify-content-between.align-items-center.mb-3{
    flex-wrap: wrap;
    row-gap: .75rem;
  }
  .content .d-flex.justify-content-between.align-items-center.mb-3 > h1,
  .content .d-flex.justify-content-between.align-items-center.mb-3 > h2,
  .content .d-flex.justify-content-between.align-items-center.mb-3 > h3,
  .content .d-flex.justify-content-between.align-items-center.mb-3 > h4,
  .content .d-flex.justify-content-between.align-items-center.mb-3 > h5{
    flex: 1 1 100%;
  }
}