// ============================================================================
// Glint System Monitor — Stylesheet
// ============================================================================

// ── Design Tokens ────────────────────────────────────────────────────────────
$bg       = #0f0f1a
$surface  = #1a1a2e
$card     = #222244
$accent   = #7c6ff0
$green    = #4ade80
$red      = #f87171
$yellow   = #fbbf24
$text     = #e2e8f0
$muted    = #94a3b8
$border   = #2d2d50

// ── Mixins ───────────────────────────────────────────────────────────────────
@mixin card-base {
    background: $card
    border-color: $border
    border-width: 1px
    border-radius: 10px
    padding: 16px
    gap: 12px
}

@mixin text-body {
    color: $text
    font-size: 14px
}

// ── Globals ──────────────────────────────────────────────────────────────────
Window {
    background: $bg
}

Panel {
    background: transparent
    border-width: 0px
    padding: 0px
    gap: 12px
    direction: vertical
}

// ── Header ───────────────────────────────────────────────────────────────────
.header {
    position: sticky
    top: 0px
    background: $surface
    padding: 8px 20px
    border-bottom: 1px solid $border
    width: fill
    z-index: 100
}

.header-inner {
    direction: horizontal
    align-items: center
    gap: 10px
}

// ── Layout ───────────────────────────────────────────────────────────────────
.body {
    direction: horizontal
    padding: 16px
    gap: 16px
    width: fill
}

.col-left {
    direction: vertical
    gap: 14px
    width: 45%
}

.col-right {
    direction: vertical
    gap: 14px
    width: 55%
}

// ── Card ─────────────────────────────────────────────────────────────────────
.card {
    @use card-base
}

// ── Header Component ─────────────────────────────────────────────────────────
Header {
    color: $accent
    font-size: 18px
    padding: 2px
}

Text {
    @use text-body
}

Label {
    color: $muted
    font-size: 12px
}

// ── Input ────────────────────────────────────────────────────────────────────
Input {
    background-color: #16162e
    color: $text
    font-size: 14px
    padding: 10px
    border-radius: 8px
    border-width: 1px
    border-color: $border
    width: fill
}

// ── Toggle ───────────────────────────────────────────────────────────────────
Toggle {
    color: $text
    font-size: 14px
}

// ── Button ───────────────────────────────────────────────────────────────────
Button {
    border-radius: 8px
    border-width: 1px
    border-color: $accent
    padding: 8px 16px
    background: $surface
    color: $text
}

Button:hover {
    background: #2d2d50
    border-color: #a78bfa
}

Button:active {
    background: $accent
}

.btn-outline {
    background: transparent
    border-color: $muted
    color: $muted
}

.btn-outline:hover {
    border-color: $text
    color: $text
}

// ── ProgressBar ──────────────────────────────────────────────────────────────
ProgressBar {
    width: fill
}

// ── Slider ───────────────────────────────────────────────────────────────────
Slider {
    width: fill
}

// ── Gauge Component ──────────────────────────────────────────────────────────
.gauge {
    direction: vertical
    gap: 6px
}

.gauge-row {
    direction: horizontal
    gap: 8px
    align-items: center
}

.gauge-label {
    font-size: 12px
    color: $muted
}

// ── Tile Component ───────────────────────────────────────────────────────────
.tile {
    @use card-base
    padding: 10px
    gap: 6px
    align-items: center
}

.tile-row {
    direction: horizontal
    gap: 6px
    align-items: center
}

.tag-on {
    color: $green
    font-size: 12px
    font-weight: bold
}

.tag-off {
    color: $muted
    font-size: 12px
}

// ── Status ───────────────────────────────────────────────────────────────────
.ok {
    color: $green
    font-weight: bold
}

.err {
    color: $red
    font-weight: bold
}

// ── Button Row ───────────────────────────────────────────────────────────────
.btn-row {
    direction: horizontal
    gap: 8px
}

// ── Demo Rows ────────────────────────────────────────────────────────────────
.demo-row {
    direction: horizontal
    gap: 12px
    align-items: center
}

.demo-col {
    direction: vertical
    gap: 6px
}

// ── Font Weight ──────────────────────────────────────────────────────────────
.fw-300 { font-weight: 300 }
.fw-400 { font-weight: 400 }
.fw-700 { font-weight: 700 }
.fw-900 { font-weight: 900 }

// ── Text Align ───────────────────────────────────────────────────────────────
.ta-box {
    background: #16162e
    padding: 6px 10px
    border-radius: 6px
    width: fill
}

.ta-l { text-align: left }
.ta-c { text-align: center }
.ta-r { text-align: right }

// ── Line Height ──────────────────────────────────────────────────────────────
.lh-box {
    direction: vertical
    gap: 4px
    background: #16162e
    padding: 10px
    border-radius: 6px
}

.lh-08 { line-height: 0.8 }
.lh-12 { line-height: 1.2 }
.lh-20 { line-height: 2.0 }

// ── Box Model ────────────────────────────────────────────────────────────────
.box-pad {
    background: #16162e
    padding-top: 24px
    padding-bottom: 8px
    padding-left: 12px
    padding-right: 12px
    border-radius: 6px
}

.box-margin {
    background: #16162e
    margin-top: 16px
    padding: 8px
    border-radius: 6px
}

.box-combo {
    background: #16162e
    padding: 12px
    border-width: 2px
    border-color: $accent
    border-radius: 10px
}

// ── Absolute Positioning ─────────────────────────────────────────────────────
.abs-stage {
    position: relative
    background: #16162e
    padding: 16px
    border-radius: 8px
    width: fill
    min-height: 50px
    gap: 6px
}

.abs-badge {
    position: absolute
    top: -8px
    right: 8px
}

.badge-inner {
    background: $red
    padding: 3px 8px
    border-radius: 4px
    color: #fff
    font-weight: bold
    font-size: 10px
}

// ── Opacity ──────────────────────────────────────────────────────────────────
.op-row {
    direction: horizontal
    gap: 10px
}

.op-30 {
    background: $accent
    padding: 8px 12px
    border-radius: 6px
    opacity: 0.3
}

.op-60 {
    background: $accent
    padding: 8px 12px
    border-radius: 6px
    opacity: 0.6
}

.op-85 {
    background: $accent
    padding: 8px 12px
    border-radius: 6px
    opacity: 0.85
}

.op-100 {
    background: $accent
    padding: 8px 12px
    border-radius: 6px
    opacity: 1.0
}

// ── Log / Scroll ─────────────────────────────────────────────────────────────
.log {
    @use card-base
    background: #16162e
    height: 180px
    overflow-y: scroll
    padding: 8px
    gap: 4px
}

.log-header {
    position: sticky
    top: 0px
    background: $surface
    padding: 6px 10px
    border-radius: 4px
    font-weight: bold
    font-size: 12px
    color: $accent
    width: fill
}

// ── Style Inheritance ────────────────────────────────────────────────────────
.inherit {
    background: #16162e
    padding: 12px
    border-radius: 8px
    color: $yellow
    font-size: 16px
}

.override {
    color: $red
    font-size: 12px
}

// ── Display: None ────────────────────────────────────────────────────────────
.vis {
    background: #1e1e3a
    padding: 8px 14px
    border-radius: 6px
}

.hid {
    background: $red
    padding: 8px 14px
    border-radius: 6px
    display: none
}

// ── Flex Grow ────────────────────────────────────────────────────────────────
.grow-bar {
    direction: horizontal
    gap: 6px
    width: fill
}

.grow-1 {
    background: $accent
    padding: 8px
    border-radius: 4px
    text-align: center
    flex-grow: 1
}

.grow-2 {
    background: $green
    padding: 8px
    border-radius: 4px
    text-align: center
    color: #000
    flex-grow: 2
}

// ── Toast ────────────────────────────────────────────────────────────────────
.toast {
    position: fixed
    top: 16px
    right: 16px
    background: $green
    padding: 10px 16px
    border-radius: 8px
    color: #000
    font-weight: bold
}

.toast-row {
    direction: horizontal
    gap: 10px
    align-items: center
}

.toast-x {
    background: transparent
    border-width: 0px
    padding: 0px
    color: #000
    font-size: 18px
}

// ── Comma-separated selectors ────────────────────────────────────────────────
.warn-text, .info-text {
    font-weight: bold
    padding: 6px 10px
    border-radius: 4px
}

// ── Hover pseudo on cards ────────────────────────────────────────────────────
.card:hover {
    border-color: $accent
    border-width: 1px
}