/**
 * Utility Classes for Loon Multi-Tenant CMS/ERP (Bootstrap 6)
 *
 * Loon's own utilities plus the few Bootstrap ones whose values we change.
 * Utilities Bootstrap 6 already ships with the same value were removed.
 *
 * Everything sits in Bootstrap 6's "utilities" layer – the top layer, so no
 * !important is needed – and loads after Bootstrap, so ours win a tie.
 *
 * Structure:
 *   1. Typography
 *   2. Backgrounds and spacing
 *   3. Borders and radius
 *   4. Sizing
 *   5. Display, cursor and transforms
 *   6. Filters, transitions and z-index
 *   7. Loading states
 *   8. Shadows and print
 */

@layer utilities {


/* =============================================================================
   1. TYPOGRAPHY
   ============================================================================= */

/* Bootstrap 6's .fw-bolder is the relative "bolder"; ours is a fixed 800 */
.fw-bolder {
  font-weight: 800;
}

/* Line heights on our own scale (.lh-1, .lh-sm and .lh-md come from Bootstrap) */
.lh-0 {
  line-height: 0;
}

.lh-xs {
  line-height: var(--bs-body-line-height-xs);
}

.lh-lg {
  line-height: var(--bs-body-line-height-lg);
}

.text-pre-wrap {
  white-space: pre-wrap;
}

/* Smaller text that wins over a component's own size (e.g. on a badge) */
.small {
  font-size: small;
  font-weight: initial;
}

.smaller {
  font-size: smaller;
  font-weight: initial;
}

/* Smaller type on phones */
@media (width < 576px) {
  .fs-4xl {
    font-size: 1rem;
  }

  .fs-3xl,
  .fs-2xl,
  .fs-xl,
  .fs-lg,
  .fs-md {
    font-size: 0.875rem;
  }
}


/* =============================================================================
   2. BACKGROUNDS AND SPACING
   ============================================================================= */

.bg-card {
  background-color: var(--bs-body-bg-secondary);
}

.ms-25 {
  margin-left: 2.5rem;
}

/* Vertical padding that matches the height of buttons and inputs */
.content-row {
  padding: var(--bs-spacer-2) 0;
}


/* =============================================================================
   3. BORDERS AND RADIUS
   ============================================================================= */

/* Border colours – solid, and fade with .border-opacity-* */
.border-secondary {
  border-color: color-mix(in srgb, var(--bs-secondary) calc(var(--bs-border-opacity, 1) * 100%), transparent);
}

.border-success {
  border-color: color-mix(in srgb, var(--bs-success) calc(var(--bs-border-opacity, 1) * 100%), transparent);
}

.border-info {
  border-color: color-mix(in srgb, var(--bs-info) calc(var(--bs-border-opacity, 1) * 100%), transparent);
}

.border-warning {
  border-color: color-mix(in srgb, var(--bs-warning) calc(var(--bs-border-opacity, 1) * 100%), transparent);
}

.border-danger {
  border-color: color-mix(in srgb, var(--bs-danger) calc(var(--bs-border-opacity, 1) * 100%), transparent);
}

.border-light {
  border-color: color-mix(in srgb, var(--bs-gray-200) calc(var(--bs-border-opacity, 1) * 100%), transparent);
}

.border-transparent {
  border-color: transparent;
}

.border-end-transparent {
  border-right-color: transparent;
}

.border-opacity-10 {
  --bs-border-opacity: 0.1;
}

.border-opacity-15 {
  --bs-border-opacity: 0.15;
}

.border-opacity-20 {
  --bs-border-opacity: 0.2;
}

/* Border widths */
.border-width-0 {
  border-width: 0;
}

.border-width-1 {
  border-width: 1px;
}

.border-width-2 {
  border-width: 2px;
}

.border-width-3 {
  border-width: 3px;
}

.border-width-4 {
  border-width: 4px;
}

.border-width-5 {
  border-width: 5px;
}

/* Border styles */
.border-style-dashed {
  border-style: dashed;
}

.border-style-dotted {
  border-style: dotted;
}

.border-top-style-dashed {
  border-top-style: dashed;
}

.border-top-style-dotted {
  border-top-style: dotted;
}

.border-bottom-style-dashed {
  border-bottom-style: dashed;
}

.border-bottom-style-dotted {
  border-bottom-style: dotted;
}

/* Single-corner radius */
.rounded-top-start {
  border-top-left-radius: var(--bs-border-radius);
}

.rounded-top-start-0 {
  border-top-left-radius: 0;
}

.rounded-top-end {
  border-top-right-radius: var(--bs-border-radius);
}

.rounded-top-end-0 {
  border-top-right-radius: 0;
}

.rounded-bottom-start {
  border-bottom-left-radius: var(--bs-border-radius);
}

.rounded-bottom-start-0 {
  border-bottom-left-radius: 0;
}

.rounded-bottom-end {
  border-bottom-right-radius: var(--bs-border-radius);
}

.rounded-bottom-end-0 {
  border-bottom-right-radius: 0;
}


/* =============================================================================
   4. SIZING
   ============================================================================= */

/* Fixed widths */
.w-16px {
  width: 1rem;
}

.w-24px {
  width: 1.5rem;
}

.w-32px {
  width: 2rem;
}

.w-40px {
  width: 2.5rem;
}

.w-48px {
  width: 3rem;
}

.w-56px {
  width: 3.5rem;
}

.w-64px {
  width: 4rem;
}

.w-72px {
  width: 4.5rem;
}

.w-80px {
  width: 5rem;
}

.w-10rem {
  width: 10rem;
}

/* Minimum widths */
.wmin-0 {
  min-width: 0;
}

.wmin-200 {
  min-width: 200px;
}

.wmin-250 {
  min-width: 250px;
}

.wmin-300 {
  min-width: 300px;
}

.wmin-350 {
  min-width: 350px;
}

.wmin-400 {
  min-width: 400px;
}

.wmin-450 {
  min-width: 450px;
}

.wmin-500 {
  min-width: 500px;
}

.wmin-550 {
  min-width: 550px;
}

.wmin-600 {
  min-width: 600px;
}

/* Widths from the lg breakpoint (was .w-lg-*) */
@media (width >= 1024px) {
  .lg\:w-auto {
    width: auto;
  }

  .lg\:w-25 {
    width: 25%;
  }

  .lg\:w-50 {
    width: 50%;
  }

  .lg\:w-75 {
    width: 75%;
  }

  .lg\:w-100 {
    width: 100%;
  }
}


/* =============================================================================
   5. DISPLAY, CURSOR AND TRANSFORMS
   ============================================================================= */

.align-center {
  display: flex;
  align-items: center;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-move {
  cursor: move;
}

.cursor-default {
  cursor: default;
}

.rotate-cw-45 {
  transform: rotate(45deg);
}

.rotate-cw-90 {
  transform: rotate(90deg);
}

.rotate-cw-180 {
  transform: rotate(180deg);
}

.rotate-ccw-45 {
  transform: rotate(-45deg);
}

.rotate-ccw-90 {
  transform: rotate(-90deg);
}

.rotate-ccw-180 {
  transform: rotate(-180deg);
}


/* =============================================================================
   6. FILTERS, TRANSITIONS AND Z-INDEX
   ============================================================================= */

.filter-none {
  filter: none;
}

.blur {
  color: transparent;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.no-transitions *,
.no-transitions *:before,
.no-transitions *:after {
  transition: none;
}

.zindex-auto {
  z-index: auto;
}

.zindex-1 {
  z-index: 1;
}


/* =============================================================================
   7. LOADING STATES
   .loader-wrapper lives in plugins.css next to the DataTables processing overlay.
   ============================================================================= */

/* Spinner */
div.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border: 2px solid var(--bs-dark);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner 0.8s infinite linear;
  z-index: 10;
  margin-top: 0;
}

[data-bs-theme=dark] div.loader {
  border: 2px solid var(--bs-white);
  border-right-color: transparent;
}

/* Text skeleton */
span.loader {
  display: inline-block;
  min-width: 50px;
  max-width: 100%;
  vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
  border-radius: var(--bs-border-radius);
  opacity: 0.4;
  background-color: var(--bs-gray-500);
}

span.loader::before {
  content: '\200b';
  opacity: 0;
  width: 0;
}

span.loader:empty {
  min-width: 140px;
}

@keyframes spinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.5;
  }
}

/* Block skeleton – hidden until its parent has [ph]. Replaces Bootstrap's .placeholder. */
.placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
  padding: 0 0.875rem;
  margin: 0.5rem 0;
  border-radius: var(--bs-border-radius);
  opacity: 0.1;
  background-color: #999;
  display: none;
  min-width: 120px;
  vertical-align: baseline;
  cursor: default;
}

.placeholder::after {
  content: "_";
  opacity: 0;
  visibility: hidden;
}

[ph] > .placeholder {
  display: block;
}

[ph] *:not(.placeholder) {
  display: none;
}

/* Bootstrap 6 no longer ships this animation */
@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}


/* =============================================================================
   8. SHADOWS AND PRINT
   ============================================================================= */

/* Our flat shadow instead of Bootstrap 6's layered one */
.shadow {
  box-shadow: var(--bs-box-shadow);
}

@media print {
  .dev-stats {
    display: none;
  }
}

}