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

(:let ()
  (:import (url "https://fonts.googleapis.com/css2?family=VT323&display=swap"))
  (body
    ;; :font-family "Courier New, monospace"
    :font-family "VT323, monospace"
    :font-weight 400
    :font-style normal
    :background "#0a0a0a"
    :color "#00ffff"
    :margin 0
    :padding "20px"
    :box-sizing "border-box"

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

    (strong :letter-spacing "0.08rem")

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

    (h2
     :color "#4488ff")

    (.status
     :background "#1a2332"
     :padding "20px"
     :border "1px solid #2a3441"
     :margin "20px 0")

    (.panel
     :background "#1a2332"
     :padding "20px"
     :border "1px solid #2a3441"
     :margin "20px 0")

    (.nav
     :margin "20px 0"
     :display "flex"
     :gap "5px"
     :flex-wrap "wrap"
     :justify-content center
     (a
      :color "#00ffff"
      :text-decoration none
      :margin "0"
      :padding "10px 20px"
      :border "1px solid #2a3441"
      :background "#1a2332"
      :min-width "100px"
      :text-align "center"
      :border-sizing "border-box"
      :letter-spacing "0.08rem"
      :cursor pointer
      :display inline-block)

      ((:and a :first-child)
       :margin-left "0")

      ((:and a :hover)
       :text-decoration underline
       :text-underline-offset "5px"
       :background "#2a3441"
       :color "#00ff00")

      ;; Logout button styling - subtle, not alarming
      (.btn-logout
       :background "#2a3441"
       :border-color "#3a4551"
       :color "#ff9999")
      
      ((:and .btn-logout :hover)
       :background "#3a4551"
       :border-color "#4a5561"
       :color "#ffaaaa"))

    ;; Hide conditional auth elements by default (JavaScript will show them)
    (|[data-show-if-logged-in]|
     :display none)
    
    (|[data-show-if-logged-out]|
     :display none)
    
    (|[data-show-if-admin]|
     :display none)

    (.controls
     :margin "20px 0"
     (button
      :background "#1a2332"
      :color "#00ffff"
      :border "1px solid #2a3441"
      :padding "10px 20px"
      :margin "5px"
      :cursor pointer)
     ((:and button :hover)
          :background "#2a3441"))

    (button
     :background "#2a3441"
     :color "#00ffff"
     :border "1px solid #3a4551"
     :padding "10px 20px"
     :margin "5px"
     :cursor pointer)

     ((:and button :hover)
      :background "#3a4551")

    (.now-playing
     :background "#1a2332"
     :padding "20px"
     :border "1px solid #2a3441"
     :margin "20px 0"
     :font-size "1.5em"
     :color "#4488ff"
     :overflow auto)

    ;; Recently Played Panel
    (.recently-played-panel
     :background "#1a2332"
     :border "1px solid #2a3441"
     :border-radius "8px"
     :padding "20px"
     :margin "20px 0"
     
     (h3 :margin "0 0 15px 0"
         :color "#00ff00"
         :font-size "1.2em"
         :font-weight 600)
     
     (.recently-played-list
      :min-height "100px"
      
      ((:or .loading .no-tracks .error)
       :text-align center
       :color "#888"
       :padding "20px"
       :font-style italic)
      
      (.error :color "#ff4444")
      
      (.track-link
       :display inline-flex
       :align-items center
       :gap "4px"
       :color "#00ffff"
       :text-decoration none
       :font-weight 500
       :font-size "1em"
       :transition "all 0.2s"
       
       (.external-icon
        :width "14px"
        :height "14px"
        :margin-left "2px"
        :vertical-align middle))
      
      ((:and .track-link :hover)
       :color "#00ff00"
       :text-decoration underline
       :text-underline-offset "3px")
      
      ((:and .track-link :visited)
       :color "#4488ff")
      
      (.track-list
       :list-style none
       :padding "0 12px"
       :margin 0
       :border none
       :max-height none
       :overflow-y visible)
      
      (.track-item
       :padding "10px 0"
       :border-bottom "1px solid #2a3441"
       :transition "background-color 0.2s"
       
       ((:and :last-child) :border-bottom none)
       ((:and :hover) :background-color "#2a3441")))
     
     ((:and .recently-played-list .track-info)
      :display grid
      :grid-template-columns "1fr auto"
      :grid-template-rows "auto auto"
      :gap "2px 20px"
      :align-items center)
     
     ((:and .recently-played-list .track-title)
      :grid-column 1
      :grid-row 1)
     
     ((:and .recently-played-list .track-artist)
      :color "#4488ff"
      :font-size "0.9em"
      :grid-column 1
      :grid-row 2)
     
     ((:and .recently-played-list .track-time)
      :color "#888"
      :font-size "0.85em"
      :grid-column 2
      :grid-row 1
      :text-align right))

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

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

    ;; Web Player Widget Styles
    (.player-section
     :background "#1a2332"
     :padding "25px"
     :border "1px solid #2a3441"
     :margin "20px 0"
     :border-radius "5px"
     (.live-stream
      :overflow auto) )

    (.live-stream
     ((:or p label) :font-size "1.5rem")

     (code :font-size "1rem")

     (.live-stream-quality

      :display "flex"

      (label
       :margin-right "10px")

      (select
       :padding "5px")))

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

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

    (.sort-select
     :padding "0.25rem"
     :margin-right "10px")

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

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

    (.track-info
     :flex 1
     (.track-title
      :color "#00ffff"
      :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)

    ((:and audio |::-webkit-media-controls-panel|)
     :background-color "#1a1a1a")

    ;; ((:and audio (:or |::-webkit-media-controls-mute-button|
    ;;                   |::-webkit-media-controls-play-button|
    ;;                   |::-webkit-media-controls-current-time-display|
    ;;                   |::-webkit-media-controls-time-remaining-display|
    ;;                   ))
    ;;  :height "20px"
    ;;  :line-height "20px")

    ((:and audio (:or |::-webkit-media-controls-current-time-display|
                      |::-webkit-media-controls-time-remaining-display|))
     :color "#fff")

    ((:and audio |::-webkit-media-controls-enclosure|)
     :border-radius 0)

    ((:and audio (:or |::-webkit-media-controls-mute-button|
                      |::-webkit-media-controls-play-button|
                      |::-webkit-media-controls-volume-slider|
                      |::-webkit-media-controls-timeline|
                      |::-webkit-media-controls-toggle-closed-captions-button|
                      |::-webkit-media-controls-fullscreen-button|
                      |::-webkit-media-controls-timeline|
                      |::-webkit-media-controls-overlay-enclosure|))
     :filter "invert(1)")

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

    (.track-details
     (.track-title
      :font-size "1.4em"
      :color "#00ffff"
      :margin-bottom "5px")
     (.track-artist
      :font-size "1.1em"
      :color "#4488ff"
      :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 #2a3441"
     :border-radius "3px")

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

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

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

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

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

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

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

     (.btn.active
      :background "#4488ff"
      :border-color "#5599ff"
      :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 "#00ffff"
     :border "1px solid #2a3441"
     :font-family "Courier New, monospace"
     :box-sizing "border-box")

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

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

    (.play-queue
     :border "1px solid #2a3441"
     :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 #2a3441"
     :margin-bottom "5px")
    ((:and .queue-item :last-child)
     :border-bottom none
     :margin-bottom 0)

    (.queue-position
     :background "#00ff00"
     :color "#000"
     :padding "4px 8px"
     :border-radius "3px"
     :font-weight bold
     :margin-right "10px"
     :min-width "30px"
     :text-align center
     :display inline-block)

    (.queue-track-info
     :flex 1
     :margin-right "10px")

    ((:and .queue-track-info .track-title)
     :font-weight bold
     :margin-bottom "2px")

    ((:and .queue-track-info .track-artist)
     :font-size "0.9em"
     :color "#888")

    (.queue-actions
     :margin-top "20px"
     :padding "15px"
     :background "#0a0a0a"
     :border "1px solid #2a3441"
     :border-radius "4px")

    (.queue-list
     :border "1px solid #2a3441"
     :background "#0a0a0a"
     :min-height "200px"
     :max-height "400px"
     :overflow-y auto
     :padding "10px"
     :margin-bottom "20px")

    (.search-results
     :margin-top "10px"
     :max-height "300px"
     :overflow-y auto)

    (.search-result-item
     :display flex
     :justify-content space-between
     :align-items center
     :padding "10px"
     :border "1px solid #2a3441"
     :margin-bottom "5px"
     :background "#0a0a0a"
     :border-radius "3px")

    ((:and .search-result-item :hover)
     :background "#1a1a1a"
     :border-color "#00ff00")

    ((:and .search-result-item .track-info)
     :flex 1)

    ((:and .search-result-item .track-actions)
     :display flex
     :gap "5px")

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

    (.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 "#4488ff"
     :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 #2a3441"
     :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 "#1a2332"
     :border "1px solid #2a3441"
     :border-radius "3px")

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

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

    (input
     :padding "8px 12px"
     :background "#1a2332"
     :color "#00ffff"
     :border "1px solid #2a3441"
     :border-radius "3px"
     :font-family "Courier New, monospace")

    (.upload-interface
     :margin-top 2rem
     :padding 1.5rem
     :background-color "#1a2332"
     :border-radius 8px
     :border "1px solid #2a3441"

     (h3 :color "#00ffff"
         :margin-bottom 1rem)

     (.upload-area
      :border "2px dashed #2a3441"
      :border-radius 8px
      :padding 2rem
      :text-align center
      :background-color "#0f0f0f"
      :transition "border-color 0.3s ease"
        
      (.upload-icon :font-size 3rem
                    :color "#666"
                    :margin-bottom 1rem)
        
      (p :color "#999"
         :margin-bottom 1rem)
        
      (.btn :margin-top 1rem))

     ((:and .upload-area :hover)
      :border-color "#00ffff"))

    ;; Authentication Styles
    (.auth-container
     :display flex
     :justify-content center
     :align-items center
     :min-height "60vh"
     :padding 2rem)

    (.auth-form
     :background-color "#1a2332"
     :border "1px solid #2a3441"
     :border-radius 8px
     :padding 2rem
     :width "100%"
     :max-width 600px
     :box-shadow "0 4px 6px rgba(0, 0, 0, 0.3)"
    
     (h2 :color "#00ffff"
         :text-align center
         :margin-bottom 1.5rem
         :font-size 1.5rem)
    
     (h3 :color "#00ffff"
         :margin-bottom 1rem
         :font-size 1.2rem))

    (.form-group
     :margin-bottom 1.5rem
    
     (label :display block
            :color "#ccc"
            :margin-bottom 0.5rem
            :font-weight bold)
    
     (input :width "100%"
            :padding 0.75rem
            :background-color "#0f0f0f"
            :border "1px solid #2a3441"
            :border-radius 4px
            :color "#fff"
            :font-size 1rem
            :box-sizing border-box)
            
     ((:and input :focus)
      :border-color "#00ffff"
      :outline none
      :box-shadow "0 0 0 2px rgba(0, 255, 0, 0.2)"))

    (.form-actions
      :display flex
      :gap 1rem
      :margin-top 1.5rem)

    (.message
      :padding 0.75rem
      :border-radius 4px
      :margin-top 1rem
      :text-align center
      :font-weight bold

      ((:parent .success)
       :background-color "rgba(0, 255, 0, 0.1)"
       :border "1px solid #00ffff"
       :color "#00ffff")

      ((:parent .error)
       :background-color "rgba(255, 0, 0, 0.1)"
       :border "1px solid #ff0000"
       :color "#ff0000"))

    (.auth-link
      :text-align center
      :margin-top 1.5rem
      :color "#999"

      (a :color "#00ffff"
         :text-decoration none)

      ((:and a :hover) :text-decoration underline))

    ;; Profile Styles
    (.profile-info
      :margin-bottom 2rem)

    (.info-group
      :display flex
      :justify-content space-between
      :align-items center
      :padding 0.75rem 0
      :border-bottom "1px solid #2a3441"

      (label :color "#ccc"
             :font-weight bold)

      (span :color "#fff"))

    ((:and .info-group :last-child) :border-bottom none)

    (.role-badge
      :background-color "#00ffff"
      :color "#000"
      :padding "0.25rem 0.5rem"
      :border-radius 4px
      :font-size 0.875rem
      :font-weight bold)

    (.profile-actions
      :display flex
      :gap 1rem
      :justify-content center)

    ;; Additional Profile Page Styles
    (.artist-stats
      :display flex
      :flex-direction column
      :gap 0.75rem)

    (.artist-item
      :display flex
      :justify-content space-between
      :align-items center
      :padding "0.5rem 0"
      :border-bottom "1px solid #2a3441")

    ((:and .artist-item :last-child)
      :border-bottom none)

    (.artist-name
      :color "#e0e6ed"
      :font-weight 500)

    (.artist-plays
      :color "#8892b0"
      :font-size 0.875rem)

    (.track-item
      :display flex
      :justify-content space-between
      :align-items center
      :padding "0.75rem 0"
      :border-bottom "1px solid #2a3441")

    ((:and .track-item :last-child)
      :border-bottom none)

    (.track-info
      :display flex
      :flex-direction column
      :gap 0.25rem)

    (.track-title
      :color "#e0e6ed"
      :font-weight 500)

    (.track-artist
      :color "#8892b0"
      :font-size 0.875rem)

    (.track-meta
      :display flex
      :flex-direction column
      :align-items flex-end
      :gap 0.25rem
      :text-align right)

    (.track-duration
      :color "#64ffda"
      :font-size 0.875rem
      :font-weight bold)

    (.track-played-at
      :color "#8892b0"
      :font-size 0.75rem)

    (.activity-chart
      :text-align center)

    (.chart-placeholder
      :display flex
      :align-items flex-end
      :justify-content space-between
      :height 120px
      :margin "1rem 0"
      :padding "0 1rem")

    (.chart-bar
      :width 8px
      :background-color "#64ffda"
      :border-radius "2px 2px 0 0"
      :margin "0 1px"
      :min-height 4px
      :opacity 0.8)

    ((:and .chart-bar :hover)
      :opacity 1)

    (.chart-note
      :color "#8892b0"
      :font-size 0.875rem
      :margin-top 0.5rem)

    (.stat-number
      :color "#64ffda"
      :font-size 1.5rem
      :font-weight bold
      :display block)

    (.stat-text
      :color "#e0e6ed"
      :font-size 1.2rem
      :font-weight 500
      :display block)

    ;; Toast notification styles
    (.toast
      :position fixed
      :top 20px
      :right 20px
      :padding "12px 20px"
      :border-radius 4px
      :color white
      :font-weight bold
      :z-index 1000
      :transition "opacity 0.3s ease")

    ;; User Management Styles
    (.user-management :margin-top 2rem)

    (.users-table
      :width "100%"
      :border-collapse collapse
      :background-color "#1a2332"
      :border "1px solid #2a3441"
      :border-radius 8px
      :overflow hidden

      (thead
          :background-color "#0f0f0f"

          (th :padding 1rem
              :text-align left
              :color "#00ffff"
              :font-weight bold
              :border-bottom "1px solid #2a3441"))

      (tbody
       (tr :border-bottom "1px solid #2a3441"

           (td :padding 1rem
               :color "#fff"
               :vertical-align middle))
       ((:and tr :hover) :background-color "#222")


       (.user-actions
        :display flex
        :gap 0.5rem

        (.btn :padding "0.25rem 0.5rem"
              :font-size 0.875rem))))

    (.user-stats
     :display grid
     :grid-template-columns "repeat(auto-fit, minmax(150px, 1fr))"
     :gap 1rem
     :margin-bottom 2rem)

    (.stat-card
     :background-color "#1a2332"
     :border "1px solid #2a3441"
     :border-radius 8px
     :padding 1rem
     :text-align center

     (.stat-number :font-size 2rem
                   :font-weight bold
                   :color "#00ffff"
                   :display block)

     (.stat-label :color "#ccc"
                  :font-size 0.875rem
                  :margin-top 0.5rem))

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

  ) ;; Close main body block

  ;; media queries for reponsiveness
  (:media "(max-width: 576px)"
          (body
           (.playlist-controls
            :display block
            ;;:width "100%"
            (>* :width "100%")
            (button :margin-left 0
                    :margin-right 0))))
) ;; End of let block