html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.grid-link-cell {
  color: #0d6efd;
  text-decoration: underline;
  cursor: pointer;
}

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #25d366;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.whatsapp-link:hover {
  text-decoration: underline;
}

.e-grid .e-gridheader,
.e-grid .e-gridheader .e-headercell,
.e-grid .e-gridheader .e-headercelldiv {
  background-color: #1b6ec2;
  color: #fff;
}

.e-grid .e-gridheader .e-headercell .e-headertext,
.e-grid .e-gridheader .e-headercell .e-sortfilterdiv,
.e-grid .e-gridheader .e-headercell .e-icons,
.e-grid .e-gridheader .e-headercell .e-filtermenudiv,
.e-grid .e-gridheader .e-headercell .e-filtermenudiv .e-icons,
.e-grid .e-gridheader .e-headercell .e-icon-filter {
  color: #fff !important;
}

/* Active-filter indicator, styled like Excel's AutoFilter button: a small boxed
   button behind the icon on a filtered column. The theme paints the glyph itself
   (::before) in its own blue on the ".e-filtered" state, which is a color override
   on the pseudo-element, not something inherited from the icon div's `color` -
   force it white so it's the exact same icon/color/size as the unfiltered state,
   then wrap it in a small light button box like Excel does. */
.e-grid .e-gridheader .e-headercell .e-filtermenudiv.e-filtered,
.e-grid .e-gridheader .e-headercell .e-icon-filter.e-filtered,
.e-grid .e-gridheader .e-headercell .e-filtermenudiv.e-filtered .e-icons,
.e-grid .e-gridheader .e-headercell .e-filtermenudiv.e-filtered::before,
.e-grid .e-gridheader .e-headercell .e-icon-filter.e-filtered::before {
  color: #fff !important;
}

.e-grid .e-gridheader .e-headercell .e-filtermenudiv.e-filtered {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 3px;
}

/* Grid checkbox columns (displayAsCheckBox): Syncfusion renders these read-only, which the
   theme shows as a muted/disabled-looking gray box with a barely-visible checkmark - reads as
   broken rather than "checked". Recolor to a normal-looking checkbox: white/bordered when
   unchecked, solid brand blue with a clear white check when checked. */
.e-grid .e-rowcell .e-checkbox-wrapper.e-checkbox-disabled .e-frame {
  background-color: #fff;
  border-color: #adb5bd;
  opacity: 1;
}

.e-grid .e-rowcell .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check {
  background-color: #1b6ec2;
  border-color: #1b6ec2;
  color: #fff;
}

/* Alternate row background color (zebra striping) */
.e-grid .e-row.e-altrow .e-rowcell {
  background-color: #f5f7fa;
}

.e-grid .e-row.e-altrow:hover .e-rowcell,
.e-grid .e-row.e-altrow.e-active .e-rowcell {
  background-color: #eaf1fb;
}