/* Flash area (if used) */
#ajaxMsg { display: none; }

/* Row loading shimmer */
.table .tr-loading td { position: relative; }
.table .tr-loading td::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
.table .tr-loading td > * { opacity: 0.35; }
@keyframes shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* Subtle row flash on insert */
@keyframes rowFlash {
  0% { background-color: rgba(13,110,253,0.18); }
  100% { background-color: transparent; }
}
.row-flash { animation: rowFlash 900ms ease forwards; }

/* Sortable header caret */
th.dq-sortable { cursor: pointer; user-select: none; }
th.dq-sortable.active { text-decoration: underline; }
th .dq-sort-caret { font-size: 0.8em; opacity: 0.8; }

/* Navbar tidy */
.navbar .btn, .navbar form { margin: 0; }

/* Table polish */
.table td, .table th { vertical-align: middle; }
.table { table-layout: fixed; }
.table thead th { height: var(--dq-row-h, 44px); }

/* Reserve height to avoid bounce */
.table-responsive { min-height: 8rem; }
:root { --dq-row-h: 44px; }
.table.table-sm :root { --dq-row-h: 38px; }

/* Skeleton shimmer row */
.dq-skel-row td { padding-top: .55rem; padding-bottom: .55rem; background: transparent; }
.dq-skel {
  display: inline-block;
  height: .8rem;
  border-radius: .25rem;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.04) 25%,
    rgba(0,0,0,0.08) 40%,
    rgba(0,0,0,0.04) 55%
  );
  background-size: 200% 100%;
  animation: dq-shimmer 1.6s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) {
  .dq-skel {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 25%,
      rgba(255,255,255,0.10) 40%,
      rgba(255,255,255,0.06) 55%
    );
    background-size: 200% 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dq-skel { animation: none; }
}
@keyframes dq-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Avoid dark flashes with striped tables */
.table-striped .dq-skel-row td {
  background-color: transparent !important;
}

/* Fade on data refresh */
.dq-loading tbody {
  opacity: .85;
  transition: opacity 250ms ease-in-out;
}

/* Row pulse for optimistic toggle feedback */
.dq-pulse { animation: dq-pulse-bg 550ms ease-out; }
@keyframes dq-pulse-bg {
  0%   { background-color: rgba(13,110,253,.15); }
  100% { background-color: transparent; }
}



th[data-key="enabled"], td.enabled {
  text-align: center;
}
td.enabled[data-enabled="0"] {
  color: red;
}
td.enabled[data-enabled="1"] {
  color: green;
}

/* Brand color */
/* --- Map Bootstrap navbar bg to a variable we control --- */
.navbar.bg-light    { --navbar-bg: #f8f9fa; }
.navbar.bg-white    { --navbar-bg: #ffffff; }
.navbar.bg-dark     { --navbar-bg: #212529; }
.navbar.bg-body     { --navbar-bg: var(--bs-body-bg, #ffffff); }
/* Fallback */
.navbar { --navbar-bg: var(--navbar-bg, #f8f9fa); }
.brand-animated { --bs-navbar-padding-y: 0;  padding-top: 0.5rem!important;} 

/* --- Animated brand: make border and logo cycle in sync --- */
.navbar.brand-animated:not(.sticky-top):not(.fixed-top) {
  position: relative;
}

/* Animated bottom border (2px), same cycle as the logo ink */
.navbar.brand-animated::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  /* animate the actual color (not a CSS var) to avoid interpolation issues */
  background-color: #FF6B6B; /* initial coral */
  pointer-events: none;
}

/* --- Brand chip sizing + bottom alignment --- */
/* Make the brand sit flush with the bottom of the navbar */
.navbar .brand-chip { align-self: flex-end; }

/* Set a consistent height for the brand; width follows the SVG aspect ratio (206×90) */
.navbar { --brand-chip-h: 50px; } /* tweak to taste: 32–40 looks good */
.brand-chip {
  position: relative;
  height: var(--brand-chip-h);
  width: calc(var(--brand-chip-h) * (206 / 90)); /* ≈ 2.289 aspect */
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--navbar-bg); /* outside the knock-out matches navbar */
  line-height: 0;
  overflow: hidden;
}

/* The animated solid color panel behind the knockout */
.brand-chip__ink {
  position: absolute; inset: 0; z-index: 0;
  background-color: #FF6B6B;       /* initial coral */
}
.brand-chip__ink, .navbar.brand-animated::after {
  animation: brandInkCycle 50s linear infinite;
}
/* Animated hero */
.hero-ink h1 {
  color: #06D6A0;       /* initial warm yellow */
  animation: heroInkCycleH1 50s linear infinite;
}
.hero-ink {
  background-color: aliceblue;
  animation: heroInkCycle 50s linear infinite;

}

/* The inline SVG acts as a stencil; its rectangle uses currentColor */
.brand-chip__svg {
  position: relative; z-index: 1;
  color: var(--navbar-bg) !important; /* forces the rect fill to match navbar */
  display: inline-block;
}
.brand-chip__svg svg {
  display: block; width: 100%; height: 100%;
}

/* Smooth solid color cycle (no gradients) */
@keyframes brandInkCycle {
  0%   { background-color: #00b272; } /* Coral */
  18%   { background-color: #00b272; } /* Coral */
  20%  { background-color: #00bceb; } /* Warm yellow */
  38%  { background-color: #00bceb; } /* Warm yellow */
  40%  { background-color: #996aad; } /* Minty green */
  58%  { background-color: #996aad; } /* Minty green */
  60%  { background-color: #f04e5f; } /* Sky blue */
  78%  { background-color: #f04e5f; } /* Sky blue */
  80%  { background-color: #faad18; } /* Soft violet */
  98%  { background-color: #faad18; } /* Soft violet */
  100% { background-color: #00b387; } /* Back to coral */
}
/* Smooth solid color cycle (no gradients) */
@keyframes heroInkCycleH1 {
  0%   { color: #06D6A0; } /* Coral */
  18%   { color: #06D6A0; } /* Coral */
  20%  { color: #4CC9F0; } /* Warm yellow */
  38%  { color: #4CC9F0; } /* Warm yellow */
  40%  { color: #B388EB; } /* Minty green */
  58%  { color: #B388EB; } /* Minty green */
  60%  { color: #FF6B6B; } /* Sky blue */
  78%  { color: #FF6B6B; } /* Sky blue */
  80%  { color: #FFD166; } /* Soft violet */
  98%  { color: #FFD166; } /* Soft violet */
  100% { color: #06D6A0; } /* Back to coral */
}
@keyframes heroInkCycle {
  0%   { background-color: #d4ece1; } /* Coral */
  18%   { background-color: #d4ece1; } /* Coral */
  20%  { background-color: #d2eefa; } /* Warm yellow */
  38%  { background-color: #d2eefa; } /* Warm yellow */
  40%  { background-color: #ddd4e9; } /* Minty green */
  58%  { background-color: #ddd4e9; } /* Minty green */
  60%  { background-color: #fbc9c1; } /* Sky blue */
  78%  { background-color: #fbc9c1; } /* Sky blue */
  80%  { background-color: #ffefcf; } /* Soft violet */
  98%  { background-color: #ffefcf; } /* Soft violet */
  100% { background-color: #d4ece1; } /* Back to coral */
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .brand-chip__ink,
  .navbar.brand-animated::after,
  .hero-ink {
    animation: none;
  }
}


/* INDUSTRY LINKS - ADMIN */
.dq-bucket { min-height: 320px; background: #fff; }
.dq-item { background: #fff; cursor: grab; }
.dq-item:active { cursor: grabbing; }
.dq-bucket.dragover { outline: 2px dashed #0d6efd; }
/* Industry links modal polish */
.dq-bucket {
  max-height: 60vh;
  overflow: auto;
}

.dq-chip .btn.js-jump {
  width: 34px;
  flex: 0 0 34px;
  padding-left: 0;
  padding-right: 0;
}
/* Dimmed look for disabled industries */
.dq-chip.disabled-item {
  opacity: 0.5;
}

/* Ensure stretched links stay within each feature card */
.feature-card { position: relative; }
.fc-1 {
  background-color: #06D6A0;
}
.fc-1:hover {
  background-color: #00b272;
}
.fc-2 {
  background-color: #FF6B6B;
}
.fc-2:hover {
  background-color: #f04e5f;
}
.fc-3 {
  background-color: #FFD166;
}
.fc-3:hover {
  background-color: #faad18;
}

/* form editor */
.field-card.dragging { opacity:.6; border-style:dashed; }
.dq-field__handle { cursor: grab; }
.dq-field__handle:active { cursor: grabbing; }

/* Drag handle look */
.accordion .drag-handle { cursor: grab; opacity: .6; user-select: none; }
.accordion .dragging .drag-handle { cursor: grabbing; opacity: 1; }

/* Children inside a group look indented and slightly narrower */
.js-fields-container[data-scope="group"] > .accordion-item {
  margin-left: .75rem;
  border-left: 3px solid var(--bs-border-color);
}
.js-fields-container[data-scope="group"] > .accordion-item .accordion-button {
  padding-left: .5rem;
}

/* Slight visual nesting for fields inside a group */
#formFieldsList .js-fields-container {
  border-left: 3px solid #eee;
  margin-left: .5rem;
  padding-left: .75rem;
}

#formFieldsList .group-card .accordion-body {
  background: #fcfcfc;
}

/* Subtle flash on add */
#formFieldsList .flash-added {
  outline: 2px solid #28a74533;
  transition: outline-color .8s ease;
}

.js-fields-container { min-height: 10px; }
.accordion-item.dragging {
  opacity: 0.7;
}
.sorting-ghost { opacity: .6; }
.sorting-drag  { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); }

.js-option-row .form-check-input {
  margin-top: 6px;
}

.preview-form .form-section-title { margin-top: 4rem; margin-bottom: .25rem; border-top: solid #6c757d 1px; }
.preview-form .form-section-desc  { margin-bottom: 1.5rem; color:#6c757d; }
.preview-form .required-asterisk::after { content:" *"; color:#dc3545; }

/* Root of preview */
.dq-form-preview {}

/* Each section/group wrapper */
.form-section { 
  padding: 1rem;
  border-radius: .5rem;
  background: var(--section-bg, #f8f9fa);
  margin-bottom: 1.25rem;
}

/* Unique class per group based on its title */
/*.section-insurance {  background: #fff8d6; }
.section-food-license {  background: #e8f2ff; }
*/

/* Optional header */
.form-section__header { margin-bottom: .5rem; }

/* Columns for fields live inside the .row g-3 that the group creates */
.pv-col { /* extra spacing, if desired */ }

/* upload dashed look */
.border-dashed { border-style: dashed !important; }

.dq-item .dq-thumb { object-fit: cover; border: 1px solid rgba(0,0,0,.08); }