// Mobile Calendar App Styles
// Clean, beautiful design for calendar events

:root
  --primary-color: #007AFF
  --secondary-color: #5856D6
  --success-color: #34C759
  --danger-color: #FF3B30
  --warning-color: #FF9500
  --background-color: #f8f9fa
  --surface-color: #ffffff
  --border-color: #e1e5e9
  --text-primary: #1d1d1f
  --text-secondary: #6e6e73
  --text-muted: #8e8e93
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1)
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15)
  --border-radius: 12px
  --border-radius-small: 8px
  --spacing-xs: 4px
  --spacing-sm: 8px
  --spacing-md: 16px
  --spacing-lg: 24px
  --spacing-xl: 32px

*
  margin: 0
  padding: 0
  box-sizing: border-box

body
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
  background-color: var(--background-color)
  color: var(--text-primary)
  line-height: 1.5
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

.app
  min-height: 100vh
  display: flex
  flex-direction: column
  max-width: 100vw
  overflow-x: hidden

  &.calendar-app
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
    
    .main
      background: transparent

// Header
.header
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.98) 100%)
  backdrop-filter: blur(20px)
  border-bottom: 1px solid rgba(255, 255, 255, 0.2)
  padding: var(--spacing-sm) var(--spacing-md)
  position: sticky
  top: 0
  z-index: 100
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)
  border-radius: 0 0 var(--border-radius) var(--border-radius)

  .header-content
    display: flex
    flex-direction: column
    gap: var(--spacing-md)
    max-width: 600px
    margin: 0 auto

    h1
      font-size: 1.5rem
      font-weight: 700
      color: var(--text-primary)
      display: flex
      align-items: center
      gap: var(--spacing-sm)
      justify-content: center
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)

      svg
        color: var(--primary-color)
        font-size: 1.25rem
        filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.3))

  .month-navigation
    display: flex
    align-items: center
    justify-content: center
    gap: var(--spacing-md)

    .current-month
      font-size: 1.125rem
      font-weight: 600
      color: var(--text-primary)
      margin: 0
      min-width: 140px
      text-align: center
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)

    .btn-icon
      width: 44px
      height: 44px
      border-radius: 50%
      display: flex
      align-items: center
      justify-content: center
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%)
      border: none
      color: white
      transition: all 0.3s ease
      box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3)

      &:hover
        transform: translateY(-2px) scale(1.05)
        box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4)

      &:active
        transform: translateY(0) scale(0.95)

  .view-controls
    display: flex
    align-items: center
    justify-content: space-between
    gap: var(--spacing-md)
    padding-top: var(--spacing-sm)
    border-top: 1px solid rgba(255, 255, 255, 0.3)

    .view-type-toggle
      display: flex
      gap: 4px
      background: rgba(255, 255, 255, 0.7)
      padding: 4px
      border-radius: var(--border-radius)
      backdrop-filter: blur(10px)
      border: 1px solid rgba(255, 255, 255, 0.3)
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)

      .btn
        padding: var(--spacing-xs) var(--spacing-md)
        border-radius: var(--border-radius-small)
        font-size: 0.875rem
        font-weight: 600
        transition: all 0.3s ease
        border: none

        &.btn-primary
          background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%)
          color: white
          box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3)

        &.btn-secondary
          background: transparent
          color: var(--text-secondary)

          &:hover
            background: rgba(255, 255, 255, 0.5)
            color: var(--text-primary)

    .user-select
      padding: var(--spacing-sm) var(--spacing-md)
      border: 1px solid rgba(255, 255, 255, 0.3)
      border-radius: var(--border-radius)
      background: rgba(255, 255, 255, 0.7)
      backdrop-filter: blur(10px)
      font-size: 0.875rem
      font-weight: 500
      min-width: 120px
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
      transition: all 0.3s ease

      &:focus
        outline: none
        border-color: var(--primary-color)
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2)
        background: rgba(255, 255, 255, 0.9)

// Main Content
.main
  flex: 1
  padding: var(--spacing-md)
  max-width: 600px
  margin: 0 auto
  width: 100%
  padding-bottom: 100px // Space for FAB

// Error Message
.error-message
  background: linear-gradient(135deg, var(--danger-color) 0%, #dc3545 100%)
  color: white
  padding: var(--spacing-md) var(--spacing-lg)
  border-radius: var(--border-radius)
  margin-bottom: var(--spacing-md)
  display: flex
  align-items: center
  justify-content: space-between
  font-weight: 500
  box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3)
  backdrop-filter: blur(10px)
  border: 1px solid rgba(255, 255, 255, 0.1)
  animation: slideInFromTop 0.3s ease

  button
    background: rgba(255, 255, 255, 0.2)
    border: none
    color: white
    font-size: 1.25rem
    cursor: pointer
    padding: 0
    width: 28px
    height: 28px
    border-radius: 50%
    display: flex
    align-items: center
    justify-content: center
    transition: all 0.3s ease
    backdrop-filter: blur(10px)

    &:hover
      background: rgba(255, 255, 255, 0.3)
      transform: scale(1.1)

@keyframes slideInFromTop
  from
    opacity: 0
    transform: translateY(-10px)
  to
    opacity: 1
    transform: translateY(0)

// Loading State
.loading
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  height: 60vh
  color: var(--text-secondary)

  .loading-icon
    font-size: 3.5rem
    color: var(--primary-color)
    margin-bottom: var(--spacing-lg)
    animation: pulse-glow 2s infinite
    filter: drop-shadow(0 0 20px rgba(0, 122, 255, 0.3))

  p
    font-size: 1.125rem
    font-weight: 600
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)

@keyframes pulse-glow
  0%, 100%
    opacity: 1
    transform: scale(1)
  50%
    opacity: 0.7
    transform: scale(1.05)

@keyframes pulse
  0%, 100%
    opacity: 1
  50%
    opacity: 0.5

@keyframes pulse-today
  0%, 100%
    transform: scale(1)
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7)
  50%
    transform: scale(1.05)
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0)

// Calendar Content
.calendar-content
  display: flex
  flex-direction: column
  gap: var(--spacing-lg)

// Empty State
.empty-state
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  padding: var(--spacing-xl)
  background: var(--surface-color)
  border-radius: var(--border-radius)
  box-shadow: var(--shadow-light)
  text-align: center
  border: 2px dashed var(--border-color)
  transition: all 0.3s ease

  &:hover
    border-color: var(--primary-color)
    box-shadow: var(--shadow-medium)

  svg
    font-size: 3rem
    margin-bottom: var(--spacing-md)
    color: var(--primary-color)
    opacity: 0.5
    animation: float 3s ease-in-out infinite

  p
    font-size: 1.1rem
    font-weight: 600
    color: var(--text-primary)
    margin-bottom: var(--spacing-sm)

  small
    color: var(--text-secondary)
    line-height: 1.4

@keyframes float
  0%, 100%
    transform: translateY(0)
  50%
    transform: translateY(-10px)

// Events List
.events-list
  display: flex
  flex-direction: column
  gap: var(--spacing-lg)

.day-section
  background: var(--surface-color)
  border-radius: var(--border-radius)
  box-shadow: var(--shadow-light)
  overflow: hidden
  transition: all 0.3s ease
  border: 2px solid transparent

  &:hover
    box-shadow: var(--shadow-medium)
    transform: translateY(-2px)

  &.today
    border-color: var(--primary-color)
    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.2)

    .day-header
      background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%)

      .day-number
        background: rgba(255, 255, 255, 0.2)
        color: white
        animation: pulse-today 2s infinite

  &.other-month
    opacity: 0.7

    .day-header
      background: linear-gradient(135deg, var(--text-muted) 0%, #6c757d 100%)

  .day-header
    background: linear-gradient(135deg, var(--secondary-color) 0%, #4c46a6 100%)
    color: white
    padding: var(--spacing-md) var(--spacing-lg)
    display: flex
    align-items: center
    justify-content: space-between
    position: relative
    overflow: hidden

    &::before
      content: ''
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat
      opacity: 0.3

    .day-info
      display: flex
      align-items: center
      gap: var(--spacing-md)
      position: relative
      z-index: 1

      .day-number
        background: rgba(255, 255, 255, 0.15)
        border: 2px solid rgba(255, 255, 255, 0.3)
        border-radius: 50%
        width: 64px
        height: 64px
        display: flex
        align-items: center
        justify-content: center
        font-size: 1.75rem
        font-weight: 700
        color: white
        transition: all 0.3s ease
        backdrop-filter: blur(10px)

      .day-details
        display: flex
        flex-direction: column
        gap: 2px

        .day-name
          font-size: 1.125rem
          font-weight: 600
          text-transform: capitalize
          letter-spacing: 0.5px

        .month-indicator
          font-size: 0.75rem
          opacity: 0.9
          font-weight: 400

    .event-count
      display: flex
      flex-direction: column
      align-items: center
      gap: 2px
      background: rgba(255, 255, 255, 0.15)
      padding: var(--spacing-sm) var(--spacing-md)
      border-radius: var(--border-radius-small)
      backdrop-filter: blur(10px)
      border: 1px solid rgba(255, 255, 255, 0.2)
      position: relative
      z-index: 1

      .count-number
        font-size: 1.25rem
        font-weight: 700
        line-height: 1

      .count-label
        font-size: 0.625rem
        font-weight: 500
        opacity: 0.9
        text-transform: uppercase
        letter-spacing: 0.5px

  .day-events
    padding: var(--spacing-md)
    display: flex
    flex-direction: column
    gap: var(--spacing-sm)
    background: linear-gradient(to bottom, rgba(248, 249, 250, 0.5), rgba(255, 255, 255, 1))

// Calendar Event
.calendar-event
  background: var(--surface-color)
  border: 1px solid var(--border-color)
  border-left: 4px solid var(--primary-color)
  border-radius: var(--border-radius-small)
  padding: var(--spacing-md)
  display: flex
  align-items: flex-start
  justify-content: space-between
  gap: var(--spacing-md)
  transition: all 0.3s ease
  position: relative
  overflow: hidden

  &::before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 4px
    height: 100%
    background: linear-gradient(to bottom, var(--primary-color), rgba(0, 122, 255, 0.3))
    transition: width 0.3s ease

  &:hover
    box-shadow: var(--shadow-medium)
    transform: translateY(-2px)
    border-color: transparent

    &::before
      width: 8px

  &.birthday-event
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.1) 0%, rgba(255, 182, 193, 0.15) 100%)
    border-left: 4px solid #ff6b9d
    
    &::before
      background: linear-gradient(to bottom, #ff6b9d, rgba(255, 107, 157, 0.3))
    
    &:hover
      background: linear-gradient(135deg, rgba(255, 107, 157, 0.15) 0%, rgba(255, 182, 193, 0.2) 100%)
      box-shadow: 0 4px 20px rgba(255, 107, 157, 0.3)

  .event-content
    flex: 1
    min-width: 0
    position: relative
    z-index: 1

    .event-text
      font-weight: 500
      color: var(--text-primary)
      font-size: 1rem
      margin-bottom: var(--spacing-xs)
      word-break: break-word
      line-height: 1.4
      display: flex
      align-items: center
      gap: var(--spacing-xs)
      flex-wrap: wrap

      .birthday-icon
        color: #ff6b9d
        font-size: 1.1rem
        animation: birthday-bounce 2s infinite
        filter: drop-shadow(0 2px 4px rgba(255, 107, 157, 0.3))

      .birthday-label
        background: linear-gradient(135deg, #ff6b9d 0%, #e91e63 100%)
        color: white
        font-size: 0.625rem
        font-weight: 600
        padding: 2px 6px
        border-radius: 8px
        text-transform: uppercase
        letter-spacing: 0.5px
        margin-left: auto
        box-shadow: 0 2px 6px rgba(255, 107, 157, 0.3)

    .event-user
      font-size: 0.875rem
      font-weight: 600
      opacity: 0.8
      display: flex
      align-items: center
      gap: var(--spacing-xs)

      &::before
        content: ''
        width: 8px
        height: 8px
        border-radius: 50%
        background: currentColor
        opacity: 0.6

      .event-source
        font-size: 0.75rem
        opacity: 0.7
        font-style: italic

      .read-only-indicator
        font-size: 0.75rem
        opacity: 0.7
        font-style: italic
        color: var(--text-muted)

  .event-actions
    display: flex
    gap: var(--spacing-xs)
    flex-shrink: 0
    position: relative
    z-index: 1

    .birthday-indicator
      display: flex
      align-items: center
      justify-content: center
      width: 36px
      height: 36px
      border-radius: 50%
      background: linear-gradient(135deg, #ff6b9d 0%, #e91e63 100%)
      color: white
      box-shadow: 0 3px 10px rgba(255, 107, 157, 0.4)
      animation: birthday-glow 3s infinite

      .gift-icon
        font-size: 0.875rem
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))

    .read-only-indicator
      display: flex
      align-items: center
      justify-content: center
      width: 36px
      height: 36px
      border-radius: 50%
      background: linear-gradient(135deg, var(--text-muted) 0%, var(--text-secondary) 100%)
      color: white
      opacity: 0.7

      .read-only-text
        font-size: 0.875rem

  .edit-form
    width: 100%
    display: flex
    flex-direction: column
    gap: var(--spacing-sm)
    position: relative
    z-index: 1

    .form-group
      display: flex
      flex-direction: column

      label
        font-size: 0.875rem
        font-weight: 500
        color: var(--text-secondary)
        margin-bottom: var(--spacing-xs)

      input, select
        width: 100%
        padding: var(--spacing-sm)
        border: 1px solid var(--border-color)
        border-radius: var(--border-radius-small)
        font-size: 0.875rem
        background: var(--surface-color)
        transition: all 0.2s ease

        &:focus
          outline: none
          border-color: var(--primary-color)
          box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1)

    .edit-actions
      display: flex
      gap: var(--spacing-sm)
      justify-content: flex-end
      margin-top: var(--spacing-sm)

@keyframes birthday-bounce
  0%, 100%
    transform: translateY(0) scale(1)
  50%
    transform: translateY(-2px) scale(1.1)

@keyframes birthday-glow
  0%, 100%
    box-shadow: 0 3px 10px rgba(255, 107, 157, 0.4)
  50%
    box-shadow: 0 6px 20px rgba(255, 107, 157, 0.6)

// Buttons
.btn
  border: none
  border-radius: var(--border-radius)
  padding: var(--spacing-sm) var(--spacing-md)
  font-size: 0.875rem
  font-weight: 600
  cursor: pointer
  display: flex
  align-items: center
  justify-content: center
  gap: var(--spacing-xs)
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
  text-decoration: none
  position: relative
  overflow: hidden

  &::before
    content: ''
    position: absolute
    top: 0
    left: -100%
    width: 100%
    height: 100%
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
    transition: left 0.5s ease

  &:hover::before
    left: 100%

  &:disabled
    opacity: 0.5
    cursor: not-allowed
    transform: none !important

    &:hover::before
      left: -100%

  &.btn-primary
    background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%)
    color: white
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3)

    &:hover:not(:disabled)
      transform: translateY(-2px)
      box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4)

    &:active:not(:disabled)
      transform: translateY(0)

  &.btn-secondary
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%)
    color: var(--text-primary)
    border: 1px solid rgba(0, 0, 0, 0.1)
    backdrop-filter: blur(10px)

    &:hover:not(:disabled)
      background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(240, 242, 245, 1) 100%)
      transform: translateY(-1px)
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)

  &.btn-danger
    background: linear-gradient(135deg, var(--danger-color) 0%, #dc3545 100%)
    color: white
    box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3)

    &:hover:not(:disabled)
      transform: translateY(-2px)
      box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4)

  &.btn-small
    padding: var(--spacing-xs)
    font-size: 0.75rem
    width: 36px
    height: 36px
    border-radius: 50%

    svg
      font-size: 0.875rem

  svg
    font-size: 1rem
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))

// Add Form Overlay
.add-form-overlay
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: rgba(0, 0, 0, 0.6)
  backdrop-filter: blur(8px)
  display: flex
  align-items: center
  justify-content: center
  z-index: 1000
  padding: var(--spacing-md)
  animation: fadeIn 0.3s ease

  .add-form
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.98) 100%)
    backdrop-filter: blur(20px)
    border-radius: var(--border-radius)
    padding: var(--spacing-xl)
    width: 100%
    max-width: 420px
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2)
    max-height: 80vh
    overflow-y: auto
    border: 1px solid rgba(255, 255, 255, 0.3)
    animation: slideIn 0.3s ease

    h3
      font-size: 1.375rem
      font-weight: 700
      margin-bottom: var(--spacing-lg)
      color: var(--text-primary)
      text-align: center
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)

    .form-group
      display: flex
      flex-direction: column
      margin-bottom: var(--spacing-lg)

      label
        font-size: 0.875rem
        font-weight: 600
        color: var(--text-secondary)
        margin-bottom: var(--spacing-sm)
        text-transform: uppercase
        letter-spacing: 0.5px

      input, select
        width: 100%
        padding: var(--spacing-md)
        border: 2px solid rgba(255, 255, 255, 0.3)
        border-radius: var(--border-radius)
        font-size: 1rem
        background: rgba(255, 255, 255, 0.7)
        backdrop-filter: blur(10px)
        transition: all 0.3s ease
        font-weight: 500

        &:focus
          outline: none
          border-color: var(--primary-color)
          box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15)
          background: rgba(255, 255, 255, 0.9)

        &::placeholder
          color: var(--text-muted)
          font-weight: 400

    .form-actions
      display: flex
      gap: var(--spacing-md)
      justify-content: flex-end
      margin-top: var(--spacing-xl)

// Floating Action Button
.fab-container
  position: fixed
  bottom: var(--spacing-lg)
  right: var(--spacing-lg)
  z-index: 100

  .fab
    width: 64px
    height: 64px
    border-radius: 50%
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%)
    color: white
    border: none
    cursor: pointer
    display: flex
    align-items: center
    justify-content: center
    font-size: 1.5rem
    box-shadow: 0 8px 32px rgba(0, 122, 255, 0.4)
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
    position: relative
    overflow: hidden

    &::before
      content: ''
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%)
      transform: translateX(-100%)
      transition: transform 0.6s ease

    &:hover
      transform: translateY(-4px) scale(1.1)
      box-shadow: 0 12px 40px rgba(0, 122, 255, 0.5)

      &::before
        transform: translateX(100%)

    &:active
      transform: translateY(-2px) scale(1.05)

    svg
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))

@keyframes fadeIn
  from
    opacity: 0
  to
    opacity: 1

@keyframes slideIn
  from
    opacity: 0
    transform: translateY(20px) scale(0.95)
  to
    opacity: 1
    transform: translateY(0) scale(1)

// Responsive Design
@media (max-width: 480px)
  .main
    padding: var(--spacing-sm)

  .header
    padding: var(--spacing-xs) var(--spacing-sm)
    border-radius: 0

    .header-content
      gap: var(--spacing-sm)

      h1
        font-size: 1.25rem

    .month-navigation
      .current-month
        font-size: 1rem
        min-width: 120px

      .btn-icon
        width: 40px
        height: 40px

    .view-controls
      flex-direction: column
      gap: var(--spacing-sm)
      align-items: stretch

      .view-type-toggle
        justify-content: center

      .user-select
        width: 100%

  .day-section
    .day-header
      padding: var(--spacing-sm) var(--spacing-md)

      .day-info
        gap: var(--spacing-sm)

        .day-number
          width: 52px
          height: 52px
          font-size: 1.375rem

        .day-details
          .day-name
            font-size: 0.9rem

          .month-indicator
            font-size: 0.65rem

      .event-count
        padding: var(--spacing-xs) var(--spacing-sm)

        .count-number
          font-size: 1rem

        .count-label
          font-size: 0.5rem

    .day-events
      padding: var(--spacing-sm)

  .calendar-event
    padding: var(--spacing-sm)
    flex-direction: column
    align-items: stretch
    gap: var(--spacing-sm)

    .event-content
      .event-text
        font-size: 0.9rem

        .birthday-icon
          font-size: 1rem

        .birthday-label
          font-size: 0.5rem
          padding: 1px 4px

      .event-user
        font-size: 0.8rem

        .event-source
          font-size: 0.7rem

    .event-actions
      justify-content: flex-end
      margin-top: var(--spacing-xs)

      .birthday-indicator
        width: 32px
        height: 32px

        .gift-icon
          font-size: 0.75rem

    .btn-small
      width: 32px
      height: 32px

  .add-form-overlay
    padding: var(--spacing-sm)

    .add-form
      padding: var(--spacing-lg)
      max-height: 90vh

      h3
        font-size: 1.25rem

      .form-group
        margin-bottom: var(--spacing-md)

        input, select
          padding: var(--spacing-sm)

  .fab-container
    bottom: var(--spacing-md)
    right: var(--spacing-md)

    .fab
      width: 56px
      height: 56px
      font-size: 1.25rem

  .empty-state
    padding: var(--spacing-lg)

    svg
      font-size: 2.5rem

    p
      font-size: 1rem