/*
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║  TREASURE TROVE — utility.css  v4.2                              ║
 * ║  Utility: Spacing · Text · Display · Position · Borders          ║
 * ║           Backgrounds · Shadows · Animations · Misc              ║
 * ╚══════════════════════════════════════════════════════════════════╝
 */


/* ═══════════════════════════════════════════════════════════════════ */
/*  MARGIN                                                              */
/* ═══════════════════════════════════════════════════════════════════ */

.m-0  { margin: 0 !important; }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }

.mt-0 { margin-top: 0; }  .mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); } .mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: 0; }  .mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); } .mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); } .mb-auto { margin-bottom: auto; }

.ml-0 { margin-left: 0; }    .ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); } .ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); } .ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }   .mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); } .mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); } .mr-auto { margin-right: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }

.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }


/* ═══════════════════════════════════════════════════════════════════ */
/*  PADDING                                                             */
/* ═══════════════════════════════════════════════════════════════════ */

.p-0 { padding: 0 !important; } .p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.pt-0 { padding-top: 0; }    .pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); } .pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); } .pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }

.pb-0 { padding-bottom: 0; }  .pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); } .pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); } .pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }


/* ═══════════════════════════════════════════════════════════════════ */
/*  TEXT UTILITIES                                                      */
/* ═══════════════════════════════════════════════════════════════════ */

/* Size */
.text-xs   { font-size: var(--text-xs)   !important; }
.text-sm   { font-size: var(--text-sm)   !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg   { font-size: var(--text-lg)   !important; }
.text-xl   { font-size: var(--text-xl)   !important; }
.text-2xl  { font-size: var(--text-2xl)  !important; }
.text-3xl  { font-size: var(--text-3xl)  !important; }
.text-4xl  { font-size: var(--text-4xl)  !important; }
.text-5xl  { font-size: var(--text-5xl)  !important; }
.text-hero { font-size: var(--text-hero) !important; }

/* Weight */
.fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }
.fw-bold   { font-weight: 700; }
.fw-black  { font-weight: 900; }
.fw-normal { font-weight: 400; }

/* Family */
.font-display { font-family: var(--font-display) !important; }
.font-body    { font-family: var(--font-body)    !important; }

/* Align */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Color */
.text-bright   { color: var(--text-bright)   !important; }
.text-muted    { color: var(--text-muted)    !important; }
.text-primary  { color: var(--primary-light) !important; }
.text-accent   { color: var(--accent)        !important; }
.text-success  { color: var(--success)       !important; }
.text-danger   { color: var(--danger)        !important; }
.text-warning  { color: var(--warning)       !important; }
.text-info     { color: var(--info)          !important; }
.text-white    { color: #ffffff              !important; }

/* Gradient text */
.gradient-text {
  background: var(--gradient-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-text-accent {
  background: var(--gradient-accent) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Transform */
.uppercase   { text-transform: uppercase;   }
.lowercase   { text-transform: lowercase;   }
.capitalize  { text-transform: capitalize;  }
.italic      { font-style: italic;          }
.not-italic  { font-style: normal;          }
.underline   { text-decoration: underline;  }
.no-underline { text-decoration: none;      }
.line-through { text-decoration: line-through; }

/* Tracking */
.tracking-tight  { letter-spacing: -0.03em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide   { letter-spacing: 0.06em; }
.tracking-wider  { letter-spacing: 0.12em; }

/* Leading */
.leading-tight  { line-height: 1.15; }
.leading-snug   { line-height: 1.35; }
.leading-normal { line-height: 1.6;  }
.leading-loose  { line-height: 1.85; }

/* Overflow */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.whitespace-nowrap { white-space: nowrap; }
.break-all     { word-break: break-all; }

/* Glow */
.text-glow        { text-shadow: 0 0 22px rgba(108,99,255,0.6); }
.text-glow-accent { text-shadow: 0 0 22px rgba(255,215,0,0.6); }

/* Tabular numbers (for coin counters) */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}


/* ═══════════════════════════════════════════════════════════════════ */
/*  DISPLAY & VISIBILITY                                                */
/* ═══════════════════════════════════════════════════════════════════ */

.d-none         { display: none         !important; }
.d-block        { display: block        !important; }
.d-inline       { display: inline       !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex         !important; }
.d-inline-flex  { display: inline-flex  !important; }
.d-grid         { display: grid         !important; }

.visible   { visibility: visible; }
.invisible { visibility: hidden;  }

.opacity-0   { opacity: 0;    }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5;  }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1;    }

/* Responsive show/hide */
@media (max-width: 767px) {
  .hide-mobile        { display: none  !important; }
  .show-mobile        { display: block !important; }
  .show-mobile-flex   { display: flex  !important; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .hide-tablet        { display: none  !important; }
  .show-tablet        { display: block !important; }
}
@media (min-width: 1280px) {
  .hide-desktop       { display: none  !important; }
  .show-desktop       { display: block !important; }
  .show-desktop-flex  { display: flex  !important; }
}


/* ═══════════════════════════════════════════════════════════════════ */
/*  WIDTH & HEIGHT                                                      */
/* ═══════════════════════════════════════════════════════════════════ */

.w-auto   { width: auto;       }
.w-full   { width: 100%;       }
.w-screen { width: 100vw;      }
.w-fit    { width: fit-content;}
.w-min    { width: min-content;}
.w-max    { width: max-content;}

.h-auto   { height: auto;      }
.h-full   { height: 100%;      }
.h-screen { height: 100vh;     }

.min-h-0      { min-height: 0;       }
.min-h-full   { min-height: 100%;    }
.min-h-screen { min-height: 100vh;   }
.min-w-0      { min-width: 0;        }

.max-w-xs  { max-width: 320px;  }
.max-w-sm  { max-width: 480px;  }
.max-w-md  { max-width: 680px;  }
.max-w-lg  { max-width: 900px;  }
.max-w-xl  { max-width: 1200px; }
.max-w-prose { max-width: 65ch; }


/* ═══════════════════════════════════════════════════════════════════ */
/*  POSITION & OVERFLOW                                                 */
/* ═══════════════════════════════════════════════════════════════════ */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed;    }
.sticky   { position: sticky;   }

.inset-0  { inset: 0;    }
.top-0    { top: 0;      }
.right-0  { right: 0;    }
.bottom-0 { bottom: 0;   }
.left-0   { left: 0;     }

.overflow-hidden  { overflow: hidden;  }
.overflow-auto    { overflow: auto;    }
.overflow-visible { overflow: visible; }
.overflow-x-auto  { overflow-x: auto;   }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto  { overflow-y: auto;   }
.overflow-y-hidden { overflow-y: hidden; }

.z-raised   { z-index: var(--z-raised);   }
.z-dropdown { z-index: var(--z-dropdown); }
.z-modal    { z-index: var(--z-modal);    }


/* ═══════════════════════════════════════════════════════════════════ */
/*  BORDERS & RADIUS                                                    */
/* ═══════════════════════════════════════════════════════════════════ */

.border         { border: 1px solid var(--border); }
.border-0       { border: none !important; }
.border-t       { border-top: 1px solid var(--border); }
.border-b       { border-bottom: 1px solid var(--border); }
.border-l       { border-left: 1px solid var(--border); }
.border-r       { border-right: 1px solid var(--border); }
.border-primary { border-color: rgba(108,99,255,0.4) !important; }
.border-accent  { border-color: rgba(255,215,0,0.4)  !important; }
.border-bright  { border-color: var(--border-bright)  !important; }

.rounded-none { border-radius: 0;                  }
.rounded-xs   { border-radius: var(--radius-xs);   }
.rounded-sm   { border-radius: var(--radius-sm);   }
.rounded      { border-radius: var(--radius);      }
.rounded-lg   { border-radius: var(--radius-lg);   }
.rounded-xl   { border-radius: var(--radius-xl);   }
.rounded-2xl  { border-radius: var(--radius-2xl);  }
.rounded-full { border-radius: var(--radius-full); }


/* ═══════════════════════════════════════════════════════════════════ */
/*  BACKGROUNDS                                                         */
/* ═══════════════════════════════════════════════════════════════════ */

.bg-base        { background-color: var(--bg);       }
.bg-card        { background-color: var(--bg-card);  }
.bg-card-2      { background-color: var(--bg-card-2);}
.bg-card-3      { background-color: var(--bg-card-3);}
.bg-primary     { background: rgba(108,99,255,0.1);  }
.bg-accent      { background: rgba(255,215,0,0.1);   }
.bg-success     { background: rgba(0,200,83,0.1);    }
.bg-danger      { background: rgba(255,23,68,0.1);   }
.bg-warning     { background: rgba(255,152,0,0.1);   }
.bg-info        { background: rgba(0,176,255,0.1);   }
.bg-gradient    { background: var(--gradient-card);  }
.bg-transparent { background: transparent;           }


/* ═══════════════════════════════════════════════════════════════════ */
/*  SHADOWS & GLOWS                                                     */
/* ═══════════════════════════════════════════════════════════════════ */

.shadow-none  { box-shadow: none;                }
.shadow-sm    { box-shadow: var(--shadow-sm);    }
.shadow       { box-shadow: var(--shadow);       }
.shadow-lg    { box-shadow: var(--shadow-lg);    }
.glow-sm      { box-shadow: var(--glow-sm);      }
.glow         { box-shadow: var(--glow);         }
.glow-lg      { box-shadow: var(--glow-lg);      }
.glow-accent  { box-shadow: var(--glow-accent);  }


/* ═══════════════════════════════════════════════════════════════════ */
/*  CURSOR & INTERACTION                                                */
/* ═══════════════════════════════════════════════════════════════════ */

.cursor-pointer     { cursor: pointer; }
.cursor-default     { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab        { cursor: grab; }

.select-none  { -webkit-user-select: none; user-select: none; }
.select-text  { -webkit-user-select: text; user-select: text; }
.select-all   { -webkit-user-select: all;  user-select: all;  }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }


/* ═══════════════════════════════════════════════════════════════════ */
/*  ASPECT RATIO & OBJECT FIT                                          */
/* ═══════════════════════════════════════════════════════════════════ */

.ratio-square { aspect-ratio: 1 / 1; }
.ratio-video  { aspect-ratio: 16 / 9; }
.ratio-card   { aspect-ratio: 4 / 3; }
.ratio-portrait { aspect-ratio: 3 / 4; }

.object-cover   { object-fit: cover;   }
.object-contain { object-fit: contain; }
.object-center  { object-position: center; }


/* ═══════════════════════════════════════════════════════════════════ */
/*  ANIMATION — IntersectionObserver triggered                         */
/*  JS adds .visible when element enters viewport                      */
/* ═══════════════════════════════════════════════════════════════════ */

/* Fade */
.fade-in {
  opacity: 0;
  transition: opacity 0.65s var(--ease-out);
}
.fade-in.visible { opacity: 1; }

/* Slide up */
.slide-up {
  opacity: 0;
  transform: translateY(clamp(18px, 3vw, 38px));
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.slide-up.visible { opacity: 1; transform: translateY(0); }

/* Slide left */
.slide-left {
  opacity: 0;
  transform: translateX(clamp(-36px, -4vw, -18px));
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.slide-left.visible { opacity: 1; transform: translateX(0); }

/* Slide right */
.slide-right {
  opacity: 0;
  transform: translateX(clamp(18px, 4vw, 36px));
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.slide-right.visible { opacity: 1; transform: translateX(0); }

/* Scale in */
.scale-in {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-spring);
}
.scale-in.visible { opacity: 1; transform: scale(1); }

/* Stagger delays for child elements */
.stagger > *:nth-child(1) { transition-delay:   0ms; }
.stagger > *:nth-child(2) { transition-delay:  80ms; }
.stagger > *:nth-child(3) { transition-delay: 160ms; }
.stagger > *:nth-child(4) { transition-delay: 240ms; }
.stagger > *:nth-child(5) { transition-delay: 320ms; }
.stagger > *:nth-child(6) { transition-delay: 400ms; }
.stagger > *:nth-child(7) { transition-delay: 480ms; }
.stagger > *:nth-child(8) { transition-delay: 560ms; }


/* ─── Continuous animations ─── */

/* Hover lift */
.hover-lift { transition: transform var(--t), box-shadow var(--t); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Hover glow */
.hover-glow { transition: box-shadow var(--t), border-color var(--t); }
.hover-glow:hover { box-shadow: var(--glow); }

/* Hover glow accent */
.hover-glow-accent:hover { box-shadow: var(--glow-accent); }

/* Pulse opacity */
.pulse { animation: pulse-opacity 2.2s ease-in-out infinite; }
@keyframes pulse-opacity {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.55; }
}

/* Pulse scale */
.pulse-scale { animation: pulse-scale-kf 2s ease-in-out infinite; }
@keyframes pulse-scale-kf {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Bounce float */
.bounce { animation: bounce-float 1.8s var(--ease-spring) infinite; }
@keyframes bounce-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Spin */
.spin { animation: spin-kf 1s linear infinite; }
@keyframes spin-kf { to { transform: rotate(360deg); } }

/* Shimmer sweep on element */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.09) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: shimmer-sweep 2.8s ease-in-out infinite;
}
@keyframes shimmer-sweep { 0% { transform: translateX(-100%); } 50%, 100% { transform: translateX(100%); } }

/* Entrance (one-shot, no JS needed) */
.anim-enter {
  animation: anim-enter-kf 0.5s var(--ease-spring) both;
}
@keyframes anim-enter-kf {
  from { opacity: 0; transform: scale(0.9) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Delay helpers for anim-enter */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }


/* ═══════════════════════════════════════════════════════════════════ */
/*  GLASS EFFECT                                                        */
/* ═══════════════════════════════════════════════════════════════════ */

.glass {
  background: rgba(26, 26, 46, 0.68) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(45, 43, 85, 0.55) !important;
}


/* ═══════════════════════════════════════════════════════════════════ */
/*  STATUS DOTS                                                         */
/* ═══════════════════════════════════════════════════════════════════ */

.status-dot {
  display: inline-block;
  width:  clamp(7px, 0.7vw, 10px);
  height: clamp(7px, 0.7vw, 10px);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.status-dot-active   { background: var(--success); box-shadow: 0 0 7px rgba(0,200,83,0.5); }
.status-dot-inactive { background: var(--text-muted); }
.status-dot-pending  { background: var(--warning); }
.status-dot-danger   { background: var(--danger); }

/* Pulsing active dot */
.status-dot-live {
  background: var(--success);
  animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,200,83,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(0,200,83,0); }
}


/* ═══════════════════════════════════════════════════════════════════ */
/*  DIVIDERS                                                            */
/* ═══════════════════════════════════════════════════════════════════ */

.divider   { height: 1px; background: var(--border); }
.divider-v { width: 1px; background: var(--border); align-self: stretch; }


/* ═══════════════════════════════════════════════════════════════════ */
/*  MISC                                                                */
/* ═══════════════════════════════════════════════════════════════════ */

/* Visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.not-sr-only {
  position: static;
  width: auto; height: auto;
  padding: 0; margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Clear fix */
.clearfix::after { content: ''; display: table; clear: both; }

/* No margin / no padding overrides */
.no-margin  { margin: 0  !important; }
.no-padding { padding: 0 !important; }

/* Animated number counter */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Highlight text (used in search results) */
mark, .highlight {
  background: rgba(255,215,0,0.22);
  color: var(--accent-light);
  border-radius: var(--radius-xs);
  padding: 0.05em 0.25em;
}

/* Print hide */
@media print {
  .no-print { display: none !important; }
}