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;
}

/* Brand logo thumbnail in the navbar and the businesses admin preview. The
   hairline uses --bs-border-color so it adapts to the dark theme. */
.brand-logo {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  padding: 2px;
}

/* Document Setup coordinate crop (setup-crop.js). Each region paints with the
   --crop-color the widget sets on it; the same colour marks the matching input
   group on the left, so "which region am I editing?" is answerable at a glance.
   Colours are plain hex and stay legible in both themes. */
[data-crop-group="doc"] { --crop-color: #0d6efd; }
[data-crop-group="cell"] { --crop-color: #198754; }
[data-crop-group="email"] { --crop-color: #fd7e14; }

/* One bordered panel per coordinate group, titled and tinted with its region
   colour; the active panel (the one the crop widget is editing) gets its
   border in that colour too. */
.crop-panel {
  padding: 0.5rem 0.75rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  background: rgb(var(--bs-white-rgb));
}
.crop-panel .row {
  max-width: 21rem;
}
.crop-panel-title {
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--crop-color, #0d6efd);
}
.crop-panel.crop-group-active {
  border-color: var(--crop-color, #0d6efd);
  box-shadow: 0 0 0 1px var(--crop-color, #0d6efd);
}

.crop-region {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--crop-color, #0d6efd);
  /* Clicking ANY region activates it (and drags it). Leaving these clickable
     matters: with pointer-events:none a click would fall through to the image
     and start a new selection over the box the user meant to pick. */
  pointer-events: auto;
  cursor: pointer;
}
.crop-region-active {
  cursor: move;
}
.crop-region-label {
  position: absolute;
  left: 0;
  /* Sits ABOVE the rectangle by default, so it never covers the part of the
     document the region is pointing at. */
  bottom: 100%;
  margin-bottom: 2px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--crop-color, #0d6efd);
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}
/* Fallback when the region touches the top of the page (setup-crop.js adds it):
   the label cannot sit above the image, so it overlaps the region top-left at
   half transparency instead. */
.crop-region-label-inside {
  bottom: auto;
  top: 0;
  margin-bottom: 0;
  opacity: 0.5;
}
.crop-region-active .crop-region-label {
  cursor: move;
}
.crop-handle {
  position: absolute;
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--crop-color, #0d6efd);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 4;
}

/* Zoom/pan viewport (setup-crop.js). The widget marks the image container
   .crop-viewport; at fit the container is untouched (width:auto + max-width:100%
   on the image, exactly as before) so no scrollbars appear. Only when the user
   zooms does .crop-zoomed make it a scrollport, so the enlarged page can be
   panned by native scrolling. Turning overflow on only while zoomed avoids a
   stray scrollbar at fit from a handle poking a few px past the image edge. */
.crop-viewport {
  max-width: 100%;
}
.crop-viewport.crop-zoomed {
  overflow: auto;
  max-height: 70vh;
}
/* A drag on the page or its overlays must select/move a region, never be
   hijacked by the browser as a pan/zoom gesture; panning is done with the
   scrollbars or the wheel/trackpad. */
.crop-viewport img,
.crop-viewport .crop-region,
.crop-viewport .crop-handle {
  touch-action: none;
}
.crop-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.crop-zoom-value {
  min-width: 3.5rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Sticky grid headers. Each server-paged grid wraps its <table> in
   .table-responsive.grid-scroll. Bootstrap's .table-responsive only scrolls
   horizontally, so .grid-scroll adds a vertical scrollport (max-height) and the
   header row sticks to the top of that box while the rows scroll under it.
   .table sets --bs-table-bg: transparent, so the sticky cells need an opaque
   background of their own; the bottom hairline is drawn with box-shadow because
   border-collapse drops cell borders on sticky cells. The navbar is not fixed,
   so the offset is simply 0. */
.grid-scroll {
  max-height: 70vh;
  overflow: auto;
}
.grid-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 0 var(--bs-border-color);
}

/* Persistent heading / breadcrumb panel (Pages/Shared/Partials/_SiteHeader.cshtml).
   Sits directly under the navbar and pins to the top of the viewport while the page
   scrolls, so the business + current page stay visible. Uses the body/border tokens, so
   it flips with the dark theme without a separate dark.css rule. z-index sits below
   Bootstrap's dropdown (1000) so an open nav menu still paints over it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 990;
  background-color: var(--bs-body-bg);
  box-shadow: inset 0 -1px 0 0 var(--bs-border-color);
}
.site-header-business {
  font-weight: 600;
}
.site-header-breadcrumb {
  font-size: .9rem;
}