lvgl:
  displays:
    - main_display
  touchscreens:
    - touch_panel
  disp_bg_color: 0x141218
  style_definitions:
    # ── Top App Bar ──
    - id: md3_header
      bg_color: 0x1D1B20
      bg_opa: 100%
      border_width: 0
      radius: 0
      pad_all: 0
      shadow_width: 0
    # ── Status Chip ──
    - id: md3_chip
      bg_color: 0x2B2930
      bg_opa: 100%
      border_color: 0x49454F
      border_width: 1
      border_opa: 100%
      radius: 8
      pad_all: 0
    # ── Text Styles ──
    - id: md3_title
      text_color: 0xE3E2E6
      text_opa: 100%
    - id: md3_meta
      text_color: 0xC4C6CF
      text_opa: 100%
    - id: md3_icon
      text_color: 0xC4C6CF
      text_opa: 100%
    # ── Card Variants ──
    - id: md3_card_blue
      bg_color: 0x2B2930
      bg_opa: 100%
      border_color: 0x49454F
      border_width: 1
      border_opa: 100%
      radius: 16
      shadow_width: 0
    - id: md3_card_pink
      bg_color: 0x2B2930
      bg_opa: 100%
      border_color: 0x49454F
      border_width: 1
      border_opa: 100%
      radius: 16
      shadow_width: 0
    - id: md3_card_green
      bg_color: 0x2B2930
      bg_opa: 100%
      border_color: 0x49454F
      border_width: 1
      border_opa: 100%
      radius: 16
      shadow_width: 0
  theme:
    label:
      text_color: 0xE3E2E6
    button:
      text_color: 0xE3E2E6
  pages:
    - id: home
      widgets:
        # ── Header ──
        - obj:
            x: 0
            y: 0
            width: 800
            height: 64
            styles: md3_header
            widgets:
              - label:
                  x: 24
                  y: 20
                  text_color: 0xE3E2E6
                  text: "Family Room"

        # ── TV Stand ──
        - button:
            id: btn_family_room_tv_stand
            x: 24
            y: 80
            width: 234
            height: 300
            checkable: true
            styles: md3_card_blue
            checked:
              bg_color: 0xA8C7FA
              bg_opa: 100%
              border_color: 0xA8C7FA
              border_opa: 100%
              text_color: 0x001A33
            on_click:
              - homeassistant.service:
                  service: light.toggle
                  data:
                    entity_id: light.family_room_tv_stand
            widgets:
              - label:
                  x: 194
                  y: 16
                  styles: md3_icon
                  text_font: mdi_icons
                  text: "\U000F0335"  # mdi:lightbulb
              - label:
                  x: 18
                  y: 16
                  styles: md3_meta
                  text: "LIGHT"
              - label:
                  x: 18
                  y: 56
                  styles: md3_title
                  text: "TV Stand"
              - label:
                  x: 18
                  y: 90
                  styles: md3_meta
                  text: "Tap to toggle"

        # ── Small Lamp ──
        - button:
            id: btn_small_family_room_lamp
            x: 282
            y: 80
            width: 234
            height: 300
            checkable: true
            styles: md3_card_pink
            checked:
              bg_color: 0xFFD7F1
              bg_opa: 100%
              border_color: 0xFFD7F1
              border_opa: 100%
              text_color: 0x22001F
            on_click:
              - homeassistant.service:
                  service: light.toggle
                  data:
                    entity_id: light.small_family_room_lamp
            widgets:
              - label:
                  x: 194
                  y: 16
                  styles: md3_icon
                  text_font: mdi_icons
                  text: "\U000F0335"  # mdi:lightbulb
              - label:
                  x: 18
                  y: 16
                  styles: md3_meta
                  text: "LIGHT"
              - label:
                  x: 18
                  y: 56
                  styles: md3_title
                  text: "Small Lamp"
              - label:
                  x: 18
                  y: 90
                  styles: md3_meta
                  text: "Tap to toggle"

        # ── Standing Lamp ──
        - button:
            id: btn_big_family_room_lamp
            x: 540
            y: 80
            width: 236
            height: 300
            checkable: true
            styles: md3_card_green
            checked:
              bg_color: 0xB5CCBA
              bg_opa: 100%
              border_color: 0xB5CCBA
              border_opa: 100%
              text_color: 0x001F15
            on_click:
              - homeassistant.service:
                  service: light.toggle
                  data:
                    entity_id: light.living_room_lamp_1
            widgets:
              - label:
                  x: 196
                  y: 16
                  styles: md3_icon
                  text_font: mdi_icons
                  text: "\U000F0335"  # mdi:lightbulb
              - label:
                  x: 18
                  y: 16
                  styles: md3_meta
                  text: "LIGHT"
              - label:
                  x: 18
                  y: 56
                  styles: md3_title
                  text: "Standing Lamp"
              - label:
                  x: 18
                  y: 90
                  styles: md3_meta
                  text: "Tap to toggle"

        # ── Status Bar ──
        - obj:
            x: 0
            y: 400
            width: 800
            height: 80
            styles: md3_header
            widgets:
              - obj:
                  x: 8
                  y: 20
                  width: 84
                  height: 40
                  styles: md3_chip
                  widgets:
                    - label:
                        id: battery_icon
                        align: center
                        text_font: mdi_icons
                        text_color: 0xC4C6CF
                        text: "\U000F10CD"  # mdi:battery-alert-variant-outline