/* ==========================================
   UTILITIES
   Кастомні допоміжні класи
   (Bootstrap утиліти НЕ дублюємо)
   ========================================== */

/* ==========================================
   CUSTOM HEIGHT UTILITIES
   ========================================== */
.h-20em {
  height: 20em;
}

.h-200 {
  height: 200px;
}

.h-600 {
  height: 600px;
}

.min-h-100vh {
  min-height: 100vh;
}

/* ==========================================
   CUSTOM WIDTH UTILITIES
   ========================================== */
.w-60 {
  width: 60%;
}

.w-40 {
  width: 40%;
}

.w-20 {
  width: 20%;
}

/* ==========================================
   SPACER UTILITIES
   ========================================== */
.spacer-sm {
  height: 5em;
}

.spacer-md {
  height: 10em;
}

.spacer-lg {
  height: 20em;
}

.spacer-150 {
  height: 150px;
}

.spacer-200 {
  height: 200px;
}

.spacer-300 {
  height: 300px;
}

.spacer-400 {
  height: 400px;
}

/* ==========================================
   CUSTOM BORDER
   ========================================== */
.rounded-20 {
  border-radius: 20px !important;
}

/* ==========================================
   ELEMENT SHADOW (hover effect)
   ========================================== */
.elem-shadow {
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.elem-shadow:hover {
  box-shadow: var(--shadow-lg);
}

/* ==========================================
   CURSOR
   ========================================== */
.cursor-pointer {
  cursor: pointer !important;
}

/* ==========================================
   ICON SIZES
   ========================================== */
.icon-wrapper-sm {
  width: 36px;
  height: 36px;
}

.icon-wrapper-md {
  width: 40px;
  height: 40px;
  background-color: var(--color-neutral-200);
}

body.dark-mode .icon-wrapper-md {
  background-color: var(--dark-hover);
}

.icon-sm {
  max-width: 20px;
  max-height: 20px;
}

/* ==========================================
   ICON BACKGROUNDS
   ========================================== */
.icon-bg-warning {
  background: rgba(var(--rgb-orange-300), 0.1);
}

.icon-bg-primary {
  background: rgba(var(--rgb-blue-500), 0.1);
}

.icon-bg-success {
  background: rgba(var(--rgb-green-450), 0.1);
}

.icon-bg-info {
  background: rgba(var(--rgb-blue-500), 0.1);
}

.icon-bg-danger {
  background: rgba(var(--rgb-red-500), 0.1);
}

.icon-bg-secondary {
  background: rgba(var(--rgb-neutral-550), 0.1);
}

/* ==========================================
   ICON COLORS
   ========================================== */
.icon-fire {
  color: var(--color-orange-500);
}

.icon-bolt {
  color: var(--color-yellow-400);
}

.icon-water {
  color: var(--color-blue-300);
}

.icon-temp {
  color: var(--color-orange-800);
}

/* ==========================================
   BADGE/MULTIPLIER CIRCLE
   ========================================== */
.badge-circle-sm {
  width: 32px;
  height: 32px;
}

/* ==========================================
   FONT SIZE UTILITIES (custom)
   ========================================== */
.fs-08 {
  font-size: 0.8em !important;
}

.fs-13 {
  font-size: 1.3em !important;
}

.fs-lg {
  font-size: large !important;
}

/* ==========================================
   CHART/GRAPH CONTAINER
   ========================================== */
.chart-container-sm {
  height: 250px;
  width: 100%;
}

.plotly-container {
  position: relative !important;
  width: 100% !important;
}

/* ==========================================
   PLOTLY CHART FIX - Responsive charts
   ========================================== */
#plotly-plot,
#plotly-graph,
#data-plots,
[id^="plotly-container"] {
  width: 100%;
  min-width: 0;
}

/* Ensure Plotly respects container width */
.js-plotly-plot {
  width: 100% !important;
}

.js-plotly-plot .plotly {
  width: 100% !important;
}

/* ==========================================
   ABSOLUTE POSITIONING
   ========================================== */
.position-bottom-left {
  position: absolute;
  bottom: 25px;
  left: 25px;
}

/* ==========================================
   STATUS INDICATOR DOT
   ========================================== */
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot-success {
  background-color: var(--color-green-400);
}

.status-dot-danger {
  background-color: var(--color-red-550);
}

.status-dot-warning {
  background-color: var(--color-amber-400);
}

.status-dot-muted {
  background-color: var(--color-neutral-600);
}

/* ==========================================
   FADE-IN ANIMATION
   ========================================== */
.fade-in {
  opacity: 0;
}

.fade-in.is-visible {
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   FORM OVERRIDES
   ========================================== */
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.point-icon img {
  width: 2rem;
  height: 2rem;
}