// =====================================================================
// V09 redesign tokens & chrome
// =====================================================================
//
// The new shell wraps everything in `.app-shell { .app-head | .app-body }`.
// Inner views use the shared tokens below for jog/macro tiles, status
// chips and segmented controls. Anything legacy that's still needed by
// settings/admin/motor/tool/io templates remains lower in this file.

$ink         = #0f172a
$ink-soft    = #334155
$muted       = #64748b
$muted-2     = #94a3b8
$line        = #e5e7eb
$line-soft   = #f1f5f9
$bg          = #ffffff
$body-bg     = #f1f5f9

$accent      = #fde047
$accent-ink  = $ink
$accent-text = #0ea5e9

// Jog tile palette — V09 (flat soft slate, no shadow)
$jog-bg      = #3f4b63
$jog-hover   = #4a5777
$jog-dir     = #5b6885
$jog-dir-hov = #6a779a
$jog-ghost   = #8c97ad
$jog-ghost-hov = #9ba6bb
$jog-ink     = #fff
$jog-ghost-ink = $ink

body
  margin 0
  font-family 'Inter', system-ui, -apple-system, sans-serif
  background $body-bg
  color $ink

[v-cloak]
  display none

tt
  color #000
  background #eee
  padding 2px

.button-success:not([disabled])
  background-color #1cb841

.button-error:not([disabled])
  background-color #ca3c3c

.button-warning:not([disabled])
  background-color #df7514

.button-secondary:not([disabled])
  background-color #42b8dd

.button-submit:not([disabled])
  background-color #add1ad
  color #fff

.button-blue:not([disabled])
  background-color #0078e7
  color #fff

.clear
  clear left
  clear right

// =====================================================================
// App shell
// =====================================================================
.app-shell
  display flex
  flex-direction column
  height 100vh   // cap at viewport so children that ask for 1fr/flex:1
  width 100%
  overflow hidden
  background $body-bg

.app-body
  flex 1
  min-height 0
  display flex
  flex-direction column
  padding 18px
  overflow auto  // settings/motor pages can scroll inside the body

  > *
    flex 1 1 auto
    min-height 0

.app-head
  flex 0 0 96px
  height 96px
  display flex
  align-items center
  gap 18px
  padding 0 24px
  background $bg
  border-bottom 1px solid $line
  position relative
  z-index 30

  .brand-blk
    display flex
    align-items center
    gap 14px

  .brand-logo
    width 42px
    height 42px
    border-radius 8px
    background repeating-linear-gradient(135deg, #a7c7a3 0 6px, transparent 6px 14px)

  .brand-name
    font-weight 900
    font-size 22px
    letter-spacing -0.01em

  .head-spacer
    flex 1

// Underline-ribbon tabs
.tabs-host
  display inline-flex
  gap 0
  margin-right auto
  padding-left 18px
  align-items stretch
  height 96px

.ktab
  position relative
  height 96px
  padding 0 26px
  display inline-flex
  align-items center
  gap 0.55rem
  background transparent
  border none
  text-decoration none
  color $ink-soft
  font-size 1.05rem
  font-weight 700
  cursor pointer
  transition color .15s

  .fa
    font-size 1.1rem
    color $muted-2
    transition color .15s

  &:hover
    color $ink
    .fa
      color $ink-soft

  &.active
    color $ink
    .fa
      color $ink

  &.active::after
    content ""
    position absolute
    left 14px
    right 14px
    bottom 0
    height 5px
    background $accent
    border-radius 5px 5px 0 0

  .ktab-badge
    background #fee2e2
    color #991b1b
    font-size 0.7rem
    padding 3px 8px
    border-radius 9999px
    font-weight 800
    line-height 1

  &.active .ktab-badge
    background $accent
    color $accent-ink

// System pill (collapses old chip-soup)
.sys-btn
  display inline-flex
  align-items center
  gap 0.55rem
  height 54px
  padding 0 1.1rem
  border-radius 14px
  background $line-soft
  border 1px solid $line
  color $ink
  font-size 0.9rem
  font-weight 600
  cursor pointer
  user-select none

  &:hover
    background #e2e8f0

  .pip
    width 9px
    height 9px
    border-radius 9999px
    background #22c55e

  .pip.amber
    background #f59e0b

  .pip.red
    background #dc2626

  .fa-chevron-down
    color $muted-2
    font-size 12px

  &.open
    background #e2e8f0

.pi-temp-warning
  align-self center
  margin 0 4px
  color #dc2626
  font-size 24px

.state-badge
  display inline-flex
  align-items center
  gap 0.6rem
  height 54px
  padding 0 1.1rem
  border-radius 14px
  background #dcfce7
  color #166534
  font-weight 800
  font-size 1rem
  letter-spacing 0.04em

  .dot
    width 10px
    height 10px
    border-radius 9999px
    background currentColor
    position relative

  .dot::after
    content ""
    position absolute
    inset -3px
    border-radius 9999px
    border 2px solid currentColor
    opacity 0.5
    animation pulse-dot 1.6s ease-out infinite

  &.warn
    background #fef3c7
    color #92400e

  &.bad
    background #fee2e2
    color #991b1b

  &.busy
    background #dbeafe
    color #1e40af

  &.unknown
    background $line-soft
    color $muted

  &.unknown .dot::after
    display none

@keyframes pulse-dot
  0%
    transform scale(0.7)
    opacity 0.6
  100%
    transform scale(2.2)
    opacity 0

@media (prefers-reduced-motion: reduce)
  .state-badge .dot::after
    animation none

// System popover
.sys-popover
  position absolute
  top 96px
  right 240px
  width 360px
  background $bg
  border 1px solid $line
  border-radius 14px
  box-shadow 0 18px 40px rgba(15, 23, 42, 0.18)
  padding 12px
  z-index 40
  display flex
  flex-direction column
  gap 10px

  .sp-row
    display grid
    grid-template-columns 32px 1fr auto
    gap 12px
    align-items center

  .sp-icon
    width 32px
    height 32px
    border-radius 8px
    background $line-soft
    color $ink-soft
    display inline-flex
    align-items center
    justify-content center

    img
      width 18px
      height 18px

    .fa.sp-warn
      color #f59e0b

  .sp-label
    font-size 0.7rem
    text-transform uppercase
    letter-spacing 0.1em
    color $muted-2
    font-weight 800

  .sp-val
    font-size 0.95rem
    color $ink
    font-weight 600

  .sp-act
    height 36px
    padding 0 12px
    border-radius 8px
    background $line-soft
    border 1px solid $line
    color $ink
    font-size 0.8rem
    font-weight 700
    cursor pointer
    text-decoration none
    display inline-flex
    align-items center
    gap 4px

  .sp-act:hover
    background #e2e8f0

  .video
    width 100%
    height 180px
    border-radius 8px
    background #000
    overflow hidden
    position relative

    img
      width 100%
      height 100%
      object-fit cover

  .sp-foot
    display flex
    gap 8px
    margin-top 4px
    padding-top 10px
    border-top 1px solid $line-soft

  .sp-shutdown, .sp-save
    flex 1
    height 40px
    border-radius 10px
    border 1px solid $line
    background $line-soft
    color $ink
    font-weight 700
    cursor pointer

  .sp-shutdown
    background #fef2f2
    color #991b1b
    border-color #fecaca

  .sp-save:not([disabled])
    background $accent
    color $ink
    border-color $accent

.error
  background red
  color #fff

.warn
  background orange

.success
  background green

.fa
  font-size 150%

.modal-mask .fa
  font-size inherit

.fa.error
  background inherit
  color red

.fa.warn
  background inherit
  color orange

.fa.success
  background inherit
  color green

.load-on
  background-color #ccffcc
  color #000

@keyframes attention
  50%
    opacity 0.5

.attention
    background-color #f5e138
    color #000
    animation attention 2s step-start 0s infinite

span.unit
  font-size 60%

.status
  color #eee
  text-align center
  padding 0.125em
  font-weight bold
  margin-bottom 0.5em
  text-transform uppercase

  &.connecting
    color orange
  &.disconnected
    color red
  &.connected
    color green

#overlay
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  background-color rgba(0, 0, 0, 0.7)
  z-index 2000
  color white
  font-weight bold
  font-size 24pt
  text-align center
  text-transform uppercase

  span
    position relative
    top 50%

// Form rules used by the settings/admin/motor/tool/io templates that
// still rely on Pure form classes.
.app-body .pure-control-group
  label.units
    width 6em
    text-align left

  textarea
    width 24em
    height 12em

  > select, > input:not([type=checkbox])
    min-width 300px

  > tt
    min-width 15.25em
    padding 0.7em 1em
    border-radius 3px
    display inline-block

@keyframes blink
  50%
    fill #ff9d00

// E-Stop in the header — wraps the legacy <estop> SVG component.
// Sized to fit the 96px header with breathing room. The SVG carries
// its own yellow safety ring and EMERGENCY/STOP text; we only frame
// it with a soft drop shadow and a hover/active hit target.
.app-head .estop
  width 80px
  height 80px
  display inline-flex
  align-items center
  justify-content center
  border-radius 9999px
  cursor pointer
  transition transform 0.06s, filter 0.15s
  flex 0 0 auto
  // Make sure the SVG's internal coordinate space scales correctly
  overflow visible

  &:hover
    filter brightness(1.05)

  &:active
    transform scale(0.96)

  svg
    width 80px
    height 80px
    cursor pointer
    display block

    .button:hover
      filter brightness(120%)

.app-head .estop.active .ring
  animation blink 2s step-start 0s infinite

.app-head .estop:hover .button circle
  fill #b72424 !important

#macros
  width 104%

  .warning-box
    display flex
    background-color #F3FF00
    border-radius 5px
    border 0
    margin-bottom 10px
    margin-right 130px
    margin-top 10px
    align-items center
    justify-content center

  .new-gcode
    height 13rem
    width 23rem
    resize none
    border-radius 10px
    padding 20px
    resize none

  .flex-row-container
    display flex
    flex-direction row
    width 710px
    margin-bottom 1rem

  .tabs
    margin-top 5px
    width 850px
    padding 20px

  .macros-view
    padding 30px
    width 95%
  
  .macros-tab-content
    padding-bottom 20px
    border-radius 5px

  .macros-form
    padding-left 30px
  
  .config-button
    height 40px 
    width 150px
    font-weight normal
    border-radius 3px 
    border 0
    margin-right 10px
    display flex 
    align-items center
    justify-content space-around

  .submit-macros
    height 50px
    width 140px
    color #000
    margin-top 30px
    font-weight normal
    border 0
  

.path-viewer
  table
    margin 0.25em
    width 100%

  .path-viewer-toolbar
    > *
      margin 0.25em

    .tool-button
      display inline-block
      cursor pointer
      border 2px solid transparent
      border-radius 2px
      text-align center

      &:hover
        opacity 0.7
        border 2px inset #eee

      &.active
        border 2px inset #888
        background #ddd

      img
        max-height 32px
        vertical-align bottom

      .fa
        font-size 28px
        display inline-block
        width 32px

  .path-viewer-messages
    margin 0.125em 0

    th, td
      padding 0.125em

      &.level
        text-transform capitalize

  .path-viewer-content
    background-color #333
    background linear-gradient(to bottom, #666 0%, #222 100%);
    margin-bottom 0.5em

  &.small
    .path-viewer-content
      width 340px
      height 150px
      float right
      margin-top -88px

.console
  .console-wrapper
    max-height 400px
    overflow-y auto

  .message
    white-space pre

  table
    width 100%
    margin 0.5em 0
    border-collapse collapse

    td, th
      border 1px solid #ddd
      padding 2px

      &:first-child
        border-left 0

      &:last-child
        border-right 0

    tr
      > td
        margin 0 0.125em
        background-color #fff

tr.log-error td
  color red

tr.log-warning td
  color orange

tr.log-debug td
  color green

.indicators
  padding 1em 0
  text-align center

  table
    display inline-block
    vertical-align top
    margin 0.5em
    empty-cells show
    border 3px solid #bbb

    td, th
      padding 4px
      white-space nowrap

    tr:nth-child(odd)
      background #f7f7f7

    th
      text-align left

    td
      text-align right

    &.inputs, &.outputs
      td:nth-child(1), td:nth-child(5)
        text-align center

    th.header
      height 2.5em
      border-bottom 3px solid #ccc
      text-align center

    th.separator
      background #ccc
      border 1px solid #ccc
      padding 1px

    &.motor_fault
      td, th
        text-align center
        min-width 1.75em

      .fa-eraser
        cursor pointer

        &:hover
          opacity 0.5

.io
  &.active
    color green

  &.inactive
    color black

  &.warn
    background-color transparent
    color orange

tt.save
  display inline-block
  border-radius 2px
  background #1cb841
  color rgba(0, 0, 0, 0.8)
  padding 0.25em
  line-height initial

.modbus-program button
  margin 0.25em 0

.pure-form .modbus-regs
  input, select
    border none
    box-shadow none
    border-radius 0
    background transparent
    padding 0 0.5em
    height 1.75em
    line-height 1.75em

  input
    text-align right
    width 6em

  button
    margin 2px

  th, td
    border 1px solid #ccc
    line-height 1.75em

  th
    padding 0.5em

  &.fixed-regs td, td.reg-index, td.modbus-status
    padding 0 0.5em

  td.reg-index, td.reg-addr, td.reg-value
    text-align right

  tr:nth-child(even):not(.warn)
    background-color #f3f3f3


// Legacy `.tabs` selector retained only for #macros (Settings → Macros)
// which uses .tabs as a content container with a <select> inside; the
// old radio-based tab system has been removed.
#macros .tabs
  clear both


.motor.slave
  .tmpl-input-axis .units::after
    content "(slave motor)"
    white-space nowrap

  fieldset.limits, fieldset.homing, fieldset.motion .pure-control-group,
  fieldset.power .pure-control-group.tmpl-input-enabled
    display none

  fieldset.motion .pure-control-group.tmpl-input-reverse
    display inherit


.admin-general-view, .admin-network-view
  h2:not(:first-of-type)
    margin-top 2em

  a
    text-decoration none
  
  .tip
    font-style italic
    font-size 90%
    line-height 1.5
    white-space pre-line

.modal-mask
  position fixed
  z-index 9998
  top 0
  left 0
  width 100%
  height 100%
  background-color rgba(0, 0, 0, .25)
  display table
  transition opacity .3s ease

  .modal-wrapper
    display table-cell
    vertical-align middle

    .modal-container
      width 380px
      margin 0px auto
      padding 20px 30px
      background-color #fff
      border-radius 2px
      box-shadow 0 2px 8px rgba(0, 0, 0, .33)
      transition all .3s ease
      font-family Helvetica, Arial, sans-serif


.modal-header
  text-decoration underline

.modal-footer
  text-align right

.footer
  width 100%
  display flex
  justify-content center

.modal-enter, .modal-leave
  opacity 0

.modal-enter .modal-container
  transform scale(1.1)

.modal-leave .modal-container
  transform scale(0.9)

.file-upload
  display none

.error-message
  &.modal-mask .modal-wrapper .modal-container
    width auto
    max-width 800px

  .modal-header h3
    white-space nowrap
    overflow hidden
    text-overflow ellipsis

  .estop
    float right
    transform scale(0.75)
    margin-top -30px

  .console
    margin-bottom 1em
    clear both


.wifi-confirm table
  th
    text-align right

  th, td
    padding 0 4px


.cheat-sheet
  table
    border-collapse collapse
    margin-bottom 0.5em

    *
      text-align left

  th, td
    border 1px solid #eee
    padding 4px

  tr.header-row
    background #eee

  tr:nth-child(even)
    background #f7f7f7

  tr.unimplemented
    background #ffff9b

  tr.spacer-row
    background transparent

    th, td
      border none
      height 1em


// Compact-width fallback (e.g. 1366×768) — stack the right column
// under the jog grid and tighten the macro row.
@media only screen and (max-width: 1820px)
  .control-page .control-grid
    grid-template-columns 1fr

  .control-page .right-col
    grid-template-rows auto auto

  .control-page .macro-row
    grid-template-columns repeat(4, 1fr)

.reset-variants
  padding-left 40px
  padding-bottom 20px
  display grid
  grid-template-rows repeat(4, auto)
  grid-template-columns min-content auto
  grid-gap 20px 10px

  input[type="radio"]
    width 30px
    height 30px

  label
    font-size 16pt
    align-self center

.pure-form-aligned .pure-control-group label:not(.extra)
  width 12em

.pure-form-aligned .pure-control-group label.extra
    width 8em
  
  input.input-name
    width 300px
    height 40px
    border-top-right-radius 8px
    border-bottom-right-radius 8px
    border-top-left-radius 5px
    border-bottom-left-radius 5px
    border-width 1px
    border-color #434242
    padding-left 10px
    margin-left 2px
  
  .input-container
    display flex
    height 50px
    align-items center
    
  
  p.title
    font-size 20px
    padding-top 20px
    font-weight 600


  input.input-color
    height 45px
    width 45px
    border 1px solid #fdfdfd
    border-top-left-radius 8px
    border-bottom-left-radius 8px
  
  button
    border-radius 8px
    border-width 1px
    border 1

  .input-field
    margin-top 10px

  select .heading-option
    font-weight bold
    background-color #f0f0f0
    color #555
  
// =====================================================================
// CONTROL page (V09)
// =====================================================================
.control-page
  flex 1 1 auto
  min-height 0
  display flex
  flex-direction column
  gap 14px
  overflow hidden

.control-page .control-grid
  display grid
  grid-template-columns 720px 1fr
  gap 18px
  flex 1
  min-height 0

// Card primitive
.control-page .jog-card
.control-page .dro-card
.control-page .stat-card
.program-page .program-card
.console-page .console-card
  background $bg
  border 1px solid $line
  border-radius 18px

.control-page .jog-card
  display flex
  flex-direction column
  padding 18px
  min-height 0

.control-page .jog-head
  display flex
  align-items center
  justify-content space-between
  margin-bottom 14px

.control-page .jog-title
  font-size 18px
  font-weight 700
  color $ink

  .step-pre
    color $muted

  .step
    color $accent-text
    font-family 'JetBrains Mono', monospace
    font-weight 700
    margin-left 4px

  .unit
    color $muted-2
    font-size 0.85em
    margin-left 2px

// Step segmented control
.step-seg
  display inline-flex
  background $line-soft
  border 1px solid $line
  border-radius 14px
  padding 4px

  button
    height 48px
    min-width 64px
    padding 0 1rem
    border-radius 11px
    font-size 1rem
    font-weight 800
    color $ink-soft
    background transparent
    border none
    cursor pointer

  button.active
    background $ink
    color $accent

// Jog grid
.control-page .jog-grid
  display grid
  grid-template-columns repeat(4, 1fr)
  grid-template-rows repeat(4, 1fr)
  gap 10px
  flex 1
  min-height 0

.jbtn
  border-radius 16px
  display flex
  flex-direction column
  align-items center
  justify-content center
  gap 4px
  user-select none
  -webkit-tap-highlight-color transparent
  cursor pointer
  font-weight 700
  font-size 1.05rem
  border none
  background $jog-bg
  color $jog-ink
  transition transform 0.06s, background 0.15s
  min-height 0
  min-width 0

  .ico
    font-size 1.6rem

  .lbl
    font-size 0.8rem
    color inherit
    opacity 0.85
    font-weight 600

  &:hover:not([disabled])
    background $jog-hover

  &:active:not([disabled])
    transform scale(0.97)

  &[disabled]
    opacity 0.45
    cursor not-allowed

  &.dir
    background $jog-dir

  &.dir:hover:not([disabled])
    background $jog-dir-hov

  &.ghost
    background $jog-ghost
    color $jog-ghost-ink

  &.ghost:hover:not([disabled])
    background $jog-ghost-hov

// DRO + status
.control-page .right-col
  display grid
  grid-template-rows 1fr 158px
  gap 18px
  min-height 0

.control-page .dro-card
  overflow hidden
  display flex
  flex-direction column

.control-page .dro-head, .control-page .dro-row
  display grid
  grid-template-columns 84px 1.4fr 1fr 1fr 170px 170px 280px
  column-gap 0.75rem
  align-items center
  padding 14px 22px

.control-page .dro-head
  background #f8fafc
  border-bottom 1px solid $line
  font-size 0.78rem
  font-weight 800
  text-transform uppercase
  letter-spacing 0.1em
  color $muted-2

.control-page .dro-row
  border-bottom 1px solid $line-soft
  flex 1
  min-height 0

  &:last-child
    border-bottom none

.control-page .dro-row.warn
  background rgba(254, 243, 199, 0.4)

.control-page .dro-row.error
  background rgba(254, 226, 226, 0.4)

.dro-axis
  font-weight 900
  font-size 46px
  line-height 1
  text-transform uppercase

.dro-axis.axis-x
  color #dc2626

.dro-axis.axis-y
  color #16a34a

.dro-axis.axis-z
  color #2563eb

.dro-axis.axis-a
  color #ea580c

.dro-axis.axis-b
  color #06b6d4

.dro-axis.axis-c
  color #d946ef

.dro-axis.axis-w
  color #7c3aed

.dro-pos
  font-family 'JetBrains Mono', monospace
  font-size 36px
  font-weight 800
  letter-spacing -0.01em

.dro-pos .u
  font-size 14px
  color $muted-2
  font-weight 500
  margin-left 6px

.dro-sec
  font-family 'JetBrains Mono', monospace
  font-size 18px
  color $muted
  font-weight 600

// Status chips
.chip
  display inline-flex
  align-items center
  gap 0.4rem
  padding 0.4rem 0.7rem
  border-radius 9999px
  font-size 0.78rem
  font-weight 700

.chip-green
  background #dcfce7
  color #166534

.chip-amber
  background #fef3c7
  color #92400e

.chip-red
  background #fee2e2
  color #991b1b

.chip-slate
  background #e2e8f0
  color #334155

.chip-blue
  background #dbeafe
  color #1e40af

// Per-axis action buttons
.icon-btn
  width 72px
  height 72px
  border-radius 14px
  display inline-flex
  align-items center
  justify-content center
  color $ink-soft
  background $line-soft
  border 1px solid $line
  font-size 1.45rem
  cursor pointer

  &:hover:not([disabled])
    background #e2e8f0

  &[disabled]
    opacity 0.45
    cursor not-allowed

.actions-cell
  display flex
  justify-content flex-end
  gap 10px

// Status strip
.control-page .status-strip
  display grid
  grid-template-columns repeat(4, 1fr)
  gap 18px
  min-height 0

.control-page .stat-card
  padding 18px 22px
  display flex
  flex-direction column
  justify-content center
  position relative

  .stat-label
    font-size 11px
    font-weight 800
    text-transform uppercase
    letter-spacing 0.14em
    color $muted-2

  .stat-val
    font-family 'JetBrains Mono', monospace
    font-size 30px
    font-weight 800
    margin-top 6px
    color $ink

  .stat-val.ok
    color #166534

  .stat-val.warn
    color #92400e

  .stat-val.bad
    color #991b1b

  .stat-val.busy
    color #1e40af

  .stat-sub
    font-size 13px
    color $muted
    margin-top 2px

.control-page .stat-tappable
  cursor pointer
  transition border-color 0.15s

  &:hover
    border-color $accent-text

  .tap-hint
    margin-left 6px
    color $muted-2
    font-size 14px

  &.open
    border-color $accent
    box-shadow 0 0 0 3px rgba(253, 224, 71, 0.35)

// Macro row
.control-page .macro-row
  display grid
  grid-template-columns repeat(8, 1fr)
  gap 12px
  flex 0 0 auto

.macro-btn
  height 84px
  border-radius 14px
  border 1px solid transparent
  color #fff
  background $jog-bg
  font-weight 800
  font-size 1rem
  display flex
  align-items center
  justify-content center
  gap 0.6rem
  cursor pointer
  overflow hidden
  text-shadow 0 0 3px rgba(0, 0, 0, 0.6)
  transition transform 0.06s, background 0.15s

  &:hover:not([disabled])
    background $jog-hover

  &:active:not([disabled])
    transform translateY(2px)

  &[disabled]
    opacity 0.45
    cursor not-allowed

  // Per-macro color stripe is opt-in via :class="has-color" set by
  // the template only when state.macros[i].color is configured.
  &.has-color
    border-left-width 6px
    border-left-style solid

  .mnum
    display inline-flex
    align-items center
    justify-content center
    width 28px
    height 28px
    border-radius 8px
    background $accent
    color $accent-ink
    font-size 0.85rem
    font-weight 900
    text-shadow none
    flex 0 0 auto

  .mname
    white-space nowrap
    overflow hidden
    text-overflow ellipsis

// Override drawer
.override-drawer
  position fixed
  left 18px
  right 18px
  bottom 0
  height 0
  background $bg
  border 1px solid $line
  border-bottom none
  border-radius 18px 18px 0 0
  box-shadow 0 -10px 30px rgba(15, 23, 42, 0.18)
  overflow hidden
  transition height 0.2s, padding 0.2s
  z-index 60
  padding 0 22px

  &.open
    height 220px
    padding 18px 22px

.override-drawer .od-head
  display flex
  align-items center
  justify-content space-between
  margin-bottom 14px

.override-drawer .od-title
  font-size 1.1rem
  font-weight 800
  color $ink

.override-drawer .od-close
  width 40px
  height 40px
  border-radius 10px
  background $line-soft
  border 1px solid $line
  font-size 1.2rem
  cursor pointer

.override-drawer .od-row
  display grid
  grid-template-columns 90px 1fr 80px 140px
  gap 14px
  align-items center
  margin-bottom 10px

  label
    font-weight 700
    color $ink-soft

  input[type="range"]
    width 100%
    height 36px

  .od-val
    font-family 'JetBrains Mono', monospace
    font-weight 700
    text-align right

.override-drawer .od-reset
  height 40px
  padding 0 12px
  border-radius 10px
  background $line-soft
  border 1px solid $line
  color $ink
  font-weight 700
  cursor pointer

  &:hover
    background #e2e8f0

// =====================================================================
// PROGRAM page (V09)
// =====================================================================
.program-page
  flex 1 1 auto
  min-height 0
  display flex
  flex-direction column
  overflow hidden

.program-card
  flex 1
  display flex
  flex-direction column
  min-height 0
  overflow hidden
  background $bg
  border 1px solid $line
  border-radius 18px

.action-bar
  display flex
  align-items center
  gap 12px
  padding 18px
  flex-wrap wrap
  border-bottom 1px solid $line-soft

.action-btn
  height 84px
  padding 0 22px
  border-radius 14px
  background $jog-bg
  color #fff
  border none
  cursor pointer
  display inline-flex
  flex-direction column
  align-items center
  justify-content center
  gap 4px
  font-weight 800
  font-size 0.9rem
  letter-spacing 0.04em
  transition background 0.15s, transform 0.06s

  &:hover:not([disabled])
    background $jog-hover

  &:active:not([disabled])
    transform translateY(2px)

  &[disabled]
    opacity 0.45
    cursor not-allowed

  .ico
    font-size 1.4rem

  &.run
    background #16a34a

  &.run:hover:not([disabled])
    background #15803d

  &.stop
    background $ink

  &.stop:hover:not([disabled])
    background #1e293b

  &.danger
    background #fee2e2
    color #7f1d1d

  &.danger:hover:not([disabled])
    background #fecaca

  &.danger .ico
    color #dc2626

.file-bar
  display flex
  align-items center
  gap 10px
  padding 14px 18px
  flex-wrap wrap
  border-bottom 1px solid $line-soft

.file-btn
  height 54px
  padding 0 18px
  border-radius 12px
  background $line-soft
  border 1px solid $line
  font-weight 700
  color $ink
  font-size 0.9rem
  display inline-flex
  align-items center
  gap 0.4rem
  cursor pointer

  &:hover:not([disabled])
    background #e2e8f0

  &[disabled]
    opacity 0.45
    cursor not-allowed

.file-select
  height 54px
  padding 0 16px
  border-radius 12px
  background $bg
  border 1px solid $line
  font-weight 600
  color $ink
  font-size 0.9rem
  cursor pointer

  &.primary
    border 2px solid $accent-text
    flex 1
    min-width 300px

.program-body
  flex 1 1 auto
  display grid
  grid-template-columns 1fr 600px
  min-height 0
  overflow hidden

  > .gcode
    border-right 1px solid $line-soft
    background #fafafa
    padding 0
    margin 0
    overflow hidden
    min-height 0
    display flex
    flex-direction column

  // 3D toolpath preview — fill the entire 600px column. Override the
  // legacy `.path-viewer.small` rule which would clamp the canvas to
  // 340x150 and float it into the corner.
  > .path-viewer
    overflow hidden
    min-height 0
    display flex
    flex-direction column

    .path-viewer-content
      flex 1 1 auto
      width 100% !important
      height auto !important
      min-height 0
      float none !important
      margin 0 !important

    &.small .path-viewer-content
      width 100% !important
      height auto !important
      float none !important
      margin 0 !important

.progress-bar
  height 28px
  background #fff
  border-top 1px solid $line-soft
  position relative

  > div
    height 28px
    background #f2ac45
    color $ink
    text-align center
    line-height 28px
    font-weight 700

// Restored layout for the program-page gcode-viewer (uses clusterize.js)
.program-body .gcode
  font-family 'JetBrains Mono', monospace
  font-size 13px
  line-height 1.55

  .clusterize
    flex 1 1 0
    min-height 0
    overflow hidden
    display flex
    flex-direction column
    height 100%

  .clusterize-scroll
    flex 1 1 0
    min-height 0
    height 100%
    max-height none  // override clusterize.css default of 200px
    width 100%
    overflow auto

  ul
    margin 0
    padding 0
    list-style none

  li
    line-height 18px
    padding 1px 18px

  li:nth-child(even)
    background #f4f4f5

  li.highlight
    background #dbeafe

  li > b
    font-weight normal
    color #f59e0b
    min-width 4em
    display inline-block
    padding 0 0.25em

// =====================================================================
// CONSOLE page (V09)
// =====================================================================
.console-page
  flex 1 1 auto
  display flex
  min-height 0
  overflow hidden

.console-card
  flex 1
  display flex
  flex-direction column
  min-height 0
  overflow hidden
  background $bg
  border 1px solid $line
  border-radius 18px

.console-card .ptab-bar
  display flex
  align-items center
  gap 6px
  border-bottom 1px solid $line
  flex 0 0 auto
  padding 0 18px
  background $bg

.ptab
  height 60px
  padding 0 22px
  font-weight 700
  color $muted
  border-bottom 3px solid transparent
  font-size 1rem
  display inline-flex
  align-items center
  gap 0.4rem
  background transparent
  border-top none
  border-left none
  border-right none
  cursor pointer

  &:hover
    color $ink

  &.active
    color $ink
    border-bottom-color $ink

  .ptab-badge
    background $accent
    color $accent-ink
    font-size 0.7rem
    padding 2px 7px
    border-radius 9999px
    font-weight 900

.mdi-pane
  flex 1
  min-height 0
  padding 18px
  display flex
  flex-direction column
  gap 14px

.mdi-input
  display flex
  align-items center
  gap 0.6rem
  background #0b1220
  color #86efac
  border 1px solid #1e293b
  border-radius 14px
  padding 18px 22px
  font-family 'JetBrains Mono', monospace
  font-size 1.3rem
  font-weight 600

  .prompt
    color #475569

  input
    flex 1
    background transparent
    border none
    color inherit
    font-family inherit
    font-size inherit
    outline none

  .mdi-send
    height 48px
    padding 0 18px
    border-radius 10px
    background #16a34a
    color #fff
    border none
    font-weight 800
    cursor pointer
    font-size 0.95rem
    letter-spacing 0.05em

  .mdi-send[disabled]
    opacity 0.45
    cursor not-allowed

.mdi-keys
  display grid
  grid-template-columns repeat(8, 1fr)
  gap 8px
  flex 0 0 auto

  .mkey
    height 64px
    border-radius 12px
    background $bg
    border 1px solid $line
    font-weight 800
    font-size 1.05rem
    color $ink
    cursor pointer
    font-family 'JetBrains Mono', monospace

    &:hover
      background $line-soft

  .mkey.send
    background #16a34a
    color #fff
    border-color #15803d
    grid-column span 2
    font-family 'Inter', sans-serif

  .mkey.send[disabled]
    opacity 0.45
    cursor not-allowed

  .mkey.clear
    background #fee2e2
    color #7f1d1d
    border-color #fca5a5
    font-family 'Inter', sans-serif

.mdi-history
  flex 1
  background $bg
  border 1px solid $line
  border-radius 14px
  padding 12px 18px
  overflow auto
  font-family 'JetBrains Mono', monospace
  font-size 0.95rem

  .mdi-empty
    color $muted-2

  .h-row
    display grid
    grid-template-columns 1fr auto
    gap 14px
    padding 6px 0
    border-bottom 1px solid $line-soft
    align-items center
    cursor pointer

    &:last-child
      border-bottom none

  .h-cmd
    color $ink
    font-weight 700

  .h-status
    color $muted-2

.messages-pane
  flex 1
  min-height 0
  padding 18px
  display flex
  flex-direction column
  gap 12px
  overflow auto

  .msg-empty
    color $muted
    text-align center
    padding 40px

  .msg
    background $bg
    border 1px solid $line
    border-radius 14px
    padding 18px 22px
    display grid
    grid-template-columns 54px 1fr
    gap 18px
    align-items flex-start

  .msg.warn
    border-left 6px solid #f59e0b

  .msg.warn .mi
    background #fef3c7
    color #92400e

  .msg.info
    border-left 6px solid #0ea5e9

  .msg.info .mi
    background #dbeafe
    color #1e40af

  .msg .mi
    width 54px
    height 54px
    border-radius 12px
    display inline-flex
    align-items center
    justify-content center
    font-size 1.4rem

  .msg .mtitle
    font-weight 800
    font-size 1.05rem
    color $ink

  .msg .mtime
    font-size 0.8rem
    color $muted-2
    margin-top 2px

.indicators-pane
  flex 1
  min-height 0
  padding 18px
  overflow auto

// =====================================================================
// SETTINGS shell
// =====================================================================
.settings-shell
  flex 1
  display grid
  grid-template-columns 280px 1fr
  gap 14px
  min-height 0

.settings-rail
  background $bg
  border 1px solid $line
  border-radius 14px
  padding 10px
  display flex
  flex-direction column
  gap 4px
  align-self start
  height fit-content
  position sticky
  top 18px

  .set-item
    height 48px
    padding 0 14px
    border-radius 10px
    display flex
    align-items center
    gap 0.6rem
    color $ink-soft
    font-weight 700
    cursor pointer
    text-decoration none
    font-size 0.95rem

    .fa
      width 18px
      text-align center
      color $muted-2

  .set-item:hover
    background $line-soft

  .set-item.active
    background $ink
    color #fff

    .fa
      color $accent

  .set-section
    margin 8px 4px 4px
    font-size 0.7rem
    text-transform uppercase
    letter-spacing 0.12em
    color $muted-2
    font-weight 800

  .set-rail-foot
    display flex
    flex-direction column
    gap 6px
    margin-top 6px
    padding-top 8px
    border-top 1px solid $line-soft

    .sp-shutdown, .sp-save
      height 40px
      border-radius 10px
      border 1px solid $line
      background $line-soft
      color $ink
      font-weight 700
      cursor pointer

    .sp-shutdown
      background #fef2f2
      color #991b1b
      border-color #fecaca

    .sp-save:not([disabled])
      background $accent
      color $ink
      border-color $accent

.settings-content
  background $bg
  border 1px solid $line
  border-radius 14px
  padding 18px
  min-height 0
  overflow auto

  h1, h2, h3
    margin-top 0