/* Jump Box - Clean Minimal Dark Theme */

/* ============================================
   BASE - Pure black background
   ============================================ */

body, html, #__next, .overflow-x-hidden, main, .bg-theme-50, .dark\:bg-black {
  background-color: #000000 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ============================================
   HIDE ALL BORDERS & LINES
   ============================================ */

hr, .border-t, .border-b, .border, .divide-y > * {
  border: none !important;
  border-color: transparent !important;
}

/* ============================================
   SECTION HEADERS - Minimal
   ============================================ */

h2 {
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  padding: 8px 0 12px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: 0.05em !important;
  color: #9ca3af !important;
  border: none !important;
}

/* Hide empty service widget headers (calendar widgets use space names) */
.service:has(.service-title:empty),
.service-block:has(.service-title:empty) {
  padding-top: 0 !important;
}

.service-title:empty,
.service-block .font-medium:empty {
  display: none !important;
}

/* Actions header - light red */
h2[id="actions"], h2#actions {
  color: #f87171 !important;
}

/* ============================================
   UNIFIED WIDGET PAIRS - Sonarr/Calendar, Radarr/Calendar
   Make connected widgets look like one unit
   ============================================ */

/* Calendar widget headers - blend icon and title */
.service a[href*="calendar"],
.service-block a[href*="calendar"] {
  background: transparent !important;
  padding: 8px 12px !important;
}

/* Calendar header icons - smaller and subtle */
.service a[href*="calendar"] img,
.service-block a[href*="calendar"] img {
  width: 24px !important;
  height: 24px !important;
  opacity: 0.7 !important;
}

/* Calendar title text - more subtle */
.service a[href*="calendar"] .service-name,
.service-block a[href*="calendar"] .service-name {
  color: #9ca3af !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

/* Remove top margin/padding from Calendar widgets and adjust radius */
.service:has(a[href*="calendar"]),
.service-block:has(a[href*="calendar"]) {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ============================================
   CARDS - Subtle glass effect, no borders
   ============================================ */

.service, 
.service-block,
.widget,
.information-widget,
[class*="service-"],
.rounded-md,
.rounded-lg,
.rounded-xl {
  background: rgba(255, 255, 255, 0.03) !important;
  border: none !important;
  border-radius: 8px !important;
}

/* Card hover - subtle brighten */
.service:hover,
.service-block:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Site monitor status indicator - hide it */
.site-monitor-status {
  display: none !important;
}

/* Inner card backgrounds - match parent */
.service-block > div,
.widget > div,
.bg-theme-200\/50,
.dark\:bg-white\/5,
.bg-white\/5,
.bg-theme-100,
.dark\:bg-theme-900 {
  background: transparent !important;
  border: none !important;
}

/* ============================================
   TEXT STYLING
   ============================================ */

.service-title, 
.widget-title,
.font-medium {
  font-weight: 500 !important;
  color: #ffffff !important;
}

.service-description,
.text-xs,
.text-theme-500 {
  color: #9ca3af !important;
}

/* ============================================
   CALENDAR WIDGETS - Clean list style
   ============================================ */

/* Calendar container */
.information-widget-calendar,
div[class*="calendar"] {
  background: rgba(255, 255, 255, 0.03) !important;
  border: none !important;
}

/* Calendar items */
.information-widget-calendar li,
.information-widget-calendar .flex {
  background: transparent !important;
  border: none !important;
  padding: 6px 0 !important;
}

/* ============================================
   GLANCES WIDGET FIX
   ============================================ */

.information-widget-glances,
.information-widget-glances > div,
.information-widget-glances .flex,
div[class*="glances"] {
  background: transparent !important;
  border: none !important;
}

/* Storage bar - green */
.border-t-theme-500.bg-linear-to-b,
[class*="from-theme-500"] {
  border-color: #22c55e !important;
  background: linear-gradient(to bottom, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.05)) !important;
}

/* ============================================
   JELLYFIN / MEDIA WIDGETS
   ============================================ */

.information-widget-jellyfin,
div[class*="jellyfin"] {
  background: rgba(255, 255, 255, 0.03) !important;
  border: none !important;
}

/* ============================================
   SCROLLBAR - Minimal
   ============================================ */

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   SMOOTH SCROLLING
   ============================================ */

html {
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}

/* iOS pull to refresh - native feel */
body {
  -webkit-overflow-scrolling: touch;
}

/* Uncle Fester storage widget - green progress bar */
.border-t-theme-500.bg-linear-to-b {
  border-color: #22c55e !important;
  background: linear-gradient(to bottom, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.1)) !important;
}

.from-theme-500\/40 {
  --tw-gradient-from: rgba(34, 197, 94, 0.4) !important;
}

.to-theme-500\/10 {
  --tw-gradient-to: rgba(34, 197, 94, 0.1) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS - Mobile (minimal)
   ============================================ */

@media (max-width: 768px) {
  h2 {
    font-size: 0.9rem !important;
    padding: 8px 12px !important;
  }
}