;; LASS stylesheet for Asteroid Radio
;; Hacker-themed green terminal styling

(body
 :font-family "Courier New, monospace"
 :background "#0a0a0a"
 :color "#00ff00"
 :margin 0
 :padding "20px"

 (.container
  :max-width "1200px"
  :margin "0 auto")

 (h1
  :color "#ff6600"
  :text-align center
  :font-size "2.5em"
  :margin-bottom "30px")

 (h2
  :color "#ff6600")

 (.status
  :background "#1a1a1a"
  :padding "20px"
  :border "1px solid #333"
  :margin "20px 0")

 (.panel
  :background "#1a1a1a"
  :padding "20px"
  :border "1px solid #333"
  :margin "20px 0")

 (.nav
  :margin "20px 0"
  (a
   :color "#00ff00"
   :text-decoration none
   :margin "0 15px"
   :padding "10px 20px"
   :border "1px solid #333"
   :background "#1a1a1a"
   :display inline-block
   (:hover
    :background "#333")))

 (.controls
  :margin "20px 0"
  (button
   :background "#1a1a1a"
   :color "#00ff00"
   :border "1px solid #333"
   :padding "10px 20px"
   :margin "5px"
   :cursor pointer
   (:hover
    :background "#333")))

 (button
  :background "#333"
  :color "#00ff00"
  :border "1px solid #555"
  :padding "10px 20px"
  :margin "5px"
  :cursor pointer
  (:hover
   :background "#555"))

 (.now-playing
  :background "#1a1a1a"
  :padding "20px"
  :border "1px solid #333"
  :margin "20px 0"
  :font-size "1.5em"
  :color "#ff6600")

 (.back
  :color "#00ff00"
  :text-decoration none
  :margin-bottom "20px"
  :display inline-block
  (:hover
   :text-decoration underline))

 ;; Player-specific styles
 (.player
  :background "#1a1a1a"
  :padding "40px"
  :border "1px solid #333"
  :margin "40px auto"
  :max-width "600px"
  (.controls
   (button
    :padding "15px 30px"
    :margin "10px"
    :font-size "1.2em")))

 ;; Web Player Widget Styles
 (.player-section
  :background "#1a1a1a"
  :padding "25px"
  :border "1px solid #333"
  :margin "20px 0"
  :border-radius "5px")

 (.track-browser
  :margin "15px 0")

 (.search-input
  :width "100%"
  :padding "12px"
  :background "#0a0a0a"
  :color "#00ff00"
  :border "1px solid #333"
  :font-family "Courier New, monospace"
  :font-size "14px"
  :margin-bottom "15px")

 (.track-list
  :max-height "400px"
  :overflow-y auto
  :border "1px solid #333"
  :background "#0a0a0a")

 (.track-item
  :display flex
  :justify-content space-between
  :align-items center
  :padding "12px 15px"
  :border-bottom "1px solid #333"
  :transition "background-color 0.2s"
  (:hover
   :background "#1a1a1a"))

 (.track-info
  :flex 1
  (.track-title
   :color "#00ff00"
   :font-weight bold
   :margin-bottom "4px")
  (.track-meta
   :color "#888"
   :font-size "0.9em"))

 (.track-actions
  :display flex
  :gap "8px")

 (.audio-player
  :text-align center)

 (.track-art
  :font-size "3em"
  :margin-right "20px"
  :color "#ff6600")

 (.track-details
  (.track-title
   :font-size "1.4em"
   :color "#00ff00"
   :margin-bottom "5px")
  (.track-artist
   :font-size "1.1em"
   :color "#ff6600"
   :margin-bottom "3px")
  (.track-album
   :color "#888"))

 (.player-controls
  :margin "20px 0"
  :display flex
  :justify-content center
  :gap "10px"
  :flex-wrap wrap)

 (.player-info
  :display flex
  :justify-content space-between
  :align-items center
  :margin-top "15px"
  :padding "10px"
  :background "#0a0a0a"
  :border "1px solid #333"
  :border-radius "3px")

 (.time-display
  :color "#00ff00"
  :font-family "Courier New, monospace")

 (.volume-control
  :display flex
  :align-items center
  :gap "10px"
  (label
   :color "#ff6600"))

 (.volume-slider
  :width "100px"
  :height "5px"
  :background "#333"
  :outline none
  :border-radius "3px")

 ;; Button styles
 (.btn
  :background "#333"
  :color "#00ff00"
  :border "1px solid #555"
  :padding "8px 16px"
  :margin "3px"
  :cursor pointer
  :font-family "Courier New, monospace"
  :font-size "14px"
  :border-radius "3px"
  :transition "all 0.2s"
  (:hover
   :background "#555"
   :border-color "#777"))

 (.btn-primary
  :background "#0066cc"
  :border-color "#0088ff"
  (:hover
   :background "#0088ff"))

 (.btn-success
  :background "#006600"
  :border-color "#00aa00"
  (:hover
   :background "#00aa00"))

 (.btn-danger
  :background "#cc0000"
  :border-color "#ff0000"
  (:hover
   :background "#ff0000"))

 (.btn-info
  :background "#006666"
  :border-color "#00aaaa"
  (:hover
   :background "#00aaaa"))

 (.btn-warning
  :background "#cc6600"
  :border-color "#ff8800"
  (:hover
   :background "#ff8800"))

 (.btn-secondary
  :background "#444"
  :border-color "#666"
  (:hover
   :background "#666"))

 (.btn-sm
  :padding "4px 8px"
  :font-size "12px")

 (.btn.active
  :background "#ff6600"
  :border-color "#ff8800"
  :color "#000")

 ;; Playlist and Queue styles
 (.playlist-controls
  :margin-bottom "15px"
  :display flex
  :gap "10px"
  :align-items center)

 (.playlist-input
  :flex 1
  :padding "8px 12px"
  :background "#0a0a0a"
  :color "#00ff00"
  :border "1px solid #333"
  :font-family "Courier New, monospace")

 (.playlist-list
  :border "1px solid #333"
  :background "#0a0a0a"
  :min-height "100px"
  :padding "10px")

 (.queue-controls
  :margin-bottom "15px"
  :display flex
  :gap "10px")

 (.play-queue
  :border "1px solid #333"
  :background "#0a0a0a"
  :min-height "150px"
  :max-height "300px"
  :overflow-y auto
  :padding "10px")

 (.queue-item
  :display flex
  :justify-content space-between
  :align-items center
  :padding "8px 10px"
  :border-bottom "1px solid #333"
  :margin-bottom "5px"
  (:last-child
   :border-bottom none
   :margin-bottom 0))

 (.empty-queue
  :text-align center
  :color "#666"
  :padding "20px"
  :font-style italic)

 (.no-tracks
  :text-align center
  :color "#666"
  :padding "20px"
  :font-style italic)

 (.no-playlists
  :text-align center
  :color "#666"
  :padding "20px"
  :font-style italic)

 (.loading
  :text-align center
  :color "#ff6600"
  :padding "20px")

 (.error
  :text-align center
  :color "#ff0000"
  :padding "20px"
  :font-weight bold)

 ;; Upload interface styles
 (.upload-section
  :margin "20px 0"
  :padding "20px"
  :background "#0a0a0a"
  :border "1px solid #333"
  :border-radius "5px")

 (.upload-controls
  :display flex
  :gap "15px"
  :align-items center
  :margin-bottom "15px")

 (.upload-info
  :color "#888"
  :font-size "0.9em")

 (.upload-progress
  :margin-top "10px"
  :padding "10px"
  :background "#1a1a1a"
  :border "1px solid #333"
  :border-radius "3px")

 (.progress-bar
  :height "20px"
  :background "#ff6600"
  :border-radius "3px"
  :transition "width 0.3s ease"
  :width "0%")

 (.progress-text
  :display block
  :margin-top "5px"
  :color "#00ff00"
  :font-size "0.9em")

 (input
  :padding "8px 12px"
  :background "#1a1a1a"
  :color "#00ff00"
  :border "1px solid #333"
  :border-radius "3px"
  :font-family "Courier New, monospace")

 ;; Center alignment for player page
 (body.player-page
  :text-align center))