metube/ui/src/app/app.sass

.add-url-box
    max-width: 960px
    margin: 4rem auto

.metube-section-header
    font-size: 1.8rem
    font-weight: 300
    position: relative
    background: var(--bs-secondary-bg)
    padding: 0.5rem 0
    margin-top: 3.5rem

.metube-section-header:before
    content: ""
    position: absolute
    top: 0
    bottom: 0
    left: -9999px
    right: 0
    border-left: 9999px solid var(--bs-secondary-bg)
    box-shadow: 9999px 0 0 var(--bs-secondary-bg)

button:hover
    text-decoration: none

th
    border-top: 0
    border-bottom-width: 3px !important
    vertical-align: middle !important
    white-space: nowrap

td
    vertical-align: middle

.disabled
    opacity: 0.5
    pointer-events: none

.form-switch
  input
    margin-top: 5px

.download-progressbar
    width: 12rem
    margin-left: auto

.modal.fade.show
  background-color: rgba(0, 0, 0, 0.5)

.modal-header
  border-bottom: 1px solid var(--bs-border-color)

.modal-body
  textarea.form-control
    resize: vertical

.add-url
  display: inline-flex
  align-items: center
  justify-content: center

  .spinner-border
    margin-right: 0.5rem

.add-progress-btn
  min-width: 9.5rem
  cursor: default

.add-cancel-btn
  min-width: 3.25rem

:host
  display: flex
  flex-direction: column
  min-height: 100vh

main
  flex-grow: 1

.footer
  width: 100%
  padding: 10px 0
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.1))

  .footer-content
    display: flex
    justify-content: center
    align-items: center
    gap: 20px
    color: #fff
    font-size: 0.9rem

    .version-item
      display: flex
      align-items: center
      gap: 8px

      .version-label
        font-size: 0.75rem
        text-transform: uppercase
        letter-spacing: 0.5px
        opacity: 0.7

      .version-value
        font-family: monospace
        font-size: 0.85rem
        padding: 2px 6px
        background: rgba(255,255,255,0.1)
        border-radius: 4px

    .version-separator
      width: 1px
      height: 16px
      background: rgba(255,255,255,0.2)
      margin: 0 4px

    .github-link
      display: flex
      align-items: center
      gap: 6px
      color: #fff
      text-decoration: none
      font-size: 0.85rem
      padding: 2px 8px
      border-radius: 4px
      transition: background-color 0.2s ease

      &:hover
        background: rgba(255,255,255,0.1)
        color: #fff
        text-decoration: none

      i
        font-size: 1rem

.download-metrics
  display: flex
  align-items: center
  gap: 16px
  margin-left: 24px

  .metric
    display: flex
    align-items: center
    gap: 6px
    font-size: 0.9rem
    color: #adb5bd

    fa-icon
      font-size: 1rem

    span
      white-space: nowrap

.cookie-btn
  flex: 1 1 auto
  background-color: var(--bs-secondary-bg)
  border-color: var(--bs-border-color)
  color: var(--bs-emphasis-color)

  &:hover
    background-color: var(--bs-tertiary-bg)
    border-color: var(--bs-secondary)
    color: var(--bs-emphasis-color)

  &.disabled
    opacity: 0.65
    pointer-events: none

.cookie-active-btn
  flex: 1 1 auto
  background-color: var(--bs-success-bg-subtle)
  border-color: var(--bs-success-border-subtle)
  color: var(--bs-success-text-emphasis)

  &:hover
    background-color: var(--bs-success-bg-subtle)
    border-color: var(--bs-success)
    color: var(--bs-success-text-emphasis)

  &.disabled
    opacity: 0.65
    pointer-events: none

.action-group-label
  font-size: 0.7rem
  text-transform: uppercase
  letter-spacing: 0.05em
  color: var(--bs-secondary-color)
  margin-bottom: 0.4rem

.cookie-status
  font-size: 0.8rem
  margin-top: 0.35rem
  color: var(--bs-secondary-color)

  &.active
    color: var(--bs-success-text-emphasis)

.webhook-integration
  .input-group
    margin-bottom: 0

  .webhook-control-row
    display: grid
    row-gap: 0.75rem

  .webhook-control-endpoint
    min-width: 0

  .webhook-timeout-group
    flex-wrap: nowrap

  .webhook-timeout-input
    width: 3.4em
    min-width: 3.4em
    max-width: 3.4em
    flex: 0 0 3.4em

@media (min-width: 768px)
  .webhook-integration
    .webhook-control-row
      grid-template-columns: 150px minmax(0, 1fr) 200px
      column-gap: 0.125rem

    .webhook-control-endpoint
      margin-left: -10px

    .webhook-timeout-group
      justify-content: flex-start

    .webhook-timeout-input
      width: 65px
      min-width: 65px
      max-width: 65px
      flex: 0 0 65px

.webhook-action-row
  display: flex
  flex-wrap: wrap
  gap: 0.5rem

.webhook-status-block
  min-height: 2.5rem
  display: flex
  flex-direction: column
  justify-content: center
  text-align: left

.webhook-response-block
  margin-top: 0.25rem
  padding: 0.5rem 0.75rem
  border: 1px solid var(--bs-border-color)
  border-radius: 0.375rem
  background: var(--bs-tertiary-bg)
  white-space: pre-wrap
  word-break: break-word