/* ══════════════════════════════════════════════════════
   RESOURCE BAR — SHARED
══════════════════════════════════════════════════════ */

#information-widgets {
  flex-wrap: wrap !important;
  flex-direction: row !important;
  margin: 36px 36px 0 36px !important;
  width: auto !important;
  max-width: none !important;
}

#information-widgets form {
  flex-basis: 100% !important;
  max-width: 500px !important;
  margin: 4px auto 0 !important;
}

/* Resource icons */
.information-widget-resource svg {
  color: #34d399 !important;
  width: 22px !important;
  height: 22px !important;
}

/* Resource stats text */
.information-widget-resource .text-xs {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════
   RESOURCE BAR — DESKTOP (769px and above)
══════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  #widgets-wrap {
    flex: 1 1 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border-radius: 14px 0 0 14px !important;
    border: 1px solid rgba(52, 211, 153, 0.2) !important;
    border-right: none !important;
    padding: 14px 20px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
    width: auto !important;
    max-width: none !important;
  }

  #information-widgets-right {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 16px !important;
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border-radius: 0 14px 14px 0 !important;
    border: 1px solid rgba(52, 211, 153, 0.2) !important;
    border-left: none !important;
    padding: 14px 20px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
  }

  .widget-container {
    flex: 0 0 auto !important;
    max-width: none !important;
  }

  .widget-container > div {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
}

/* ══════════════════════════════════════════════════════
   RESOURCE BAR — MOBILE (768px and below)
══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #information-widgets {
    margin: 16px 16px 0 16px !important;
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border-radius: 14px 14px 0 0 !important;
    border: 1px solid rgba(52, 211, 153, 0.2) !important;
    border-bottom: none !important;
    padding: 16px 16px 8px 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #search-row {
    margin: 0 16px 0 16px !important;
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border-radius: 0 0 14px 14px !important;
    border: 1px solid rgba(52, 211, 153, 0.2) !important;
    border-top: none !important;
    padding: 8px 16px 16px 16px !important;
    display: flex !important;
    justify-content: center !important;
  }

  #widgets-wrap {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    display: flex !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  #information-widgets-right {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-top: 8px !important;
  }

  .widget-container {
    flex: 0 0 48% !important;
    max-width: 48% !important;
  }

  .widget-container > div {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  .information-widget-resource {
    flex: 0 0 100% !important;
  }

  #information-widgets form {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  .information-widget-datetime {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════════════
   SERVICE CARDS
══════════════════════════════════════════════════════ */

[class*="service-card"],
[class*="bg-theme"],
[class*="dark:bg-white"] {
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[class*="service-card"]:hover,
[class*="bg-theme"]:hover,
[class*="dark:bg-white"]:hover {
  background: rgba(0, 0, 0, 0.95) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(52,211,153,0.15) !important;
  transform: translateY(-3px);
}

/* ══════════════════════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════════════════════ */

h2 {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #34d399 !important;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.5) !important;
}

button.flex.w-full.select-none.items-center.group {
  border-bottom: 1px solid rgba(52, 211, 153, 0.3) !important;
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
}

button.flex.w-full.select-none.items-center.group:hover h2 {
  color: #6ee7b7 !important;
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.8) !important;
}

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

.bg-emerald-500, .bg-green-500 {
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5) !important;
  animation: pulse-green 3s ease-in-out infinite !important;
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.8); }
}

.bg-red-500 {
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5) !important;
  animation: pulse-red 2s ease-in-out infinite !important;
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
}

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

.flex-1.px-2.py-2.text-sm.text-left {
  font-weight: 600 !important;
}

.service-icon, img.rounded-md {
  width: 36px !important;
  height: 36px !important;
}

.text-theme-800, .dark\:text-theme-200 {
  color: rgba(255, 255, 255, 0.90) !important;
}

input[type="text"]:focus {
  border-color: rgba(52, 211, 153, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1) !important;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(52,211,153,0.15); border-radius: 3px; }