// =============================================================================
// Glint Design System — Core Fixed Stylesheet (main.glts)
// =============================================================================

$bg-app =       #11111b
$bg-panel =     #1e1e2e
$bg-surface =   #313244
$bg-input =     #181825
$accent =       #b4befe
$text-main =    #cdd6f4
$text-muted =   #9399b2
$border-glow =  #45475a

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

@mixin standard-card {
    background: $bg-panel
    border-color: $border-glow
    border-width: 1px
    border-radius: 12px
}

Window {
    background: $bg-app
}

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

.ui-card {
    @use standard-card
    padding: 14px
    gap: 12px
    align-items: center
    content-align: center
}

// ── Служебные Layout-классы ──────────────────────────────────────────────────

.layout-viewport {
    width: fill
    padding: 16px
    gap: 16px
}

.layout-row {
    direction: horizontal
    gap: 16px
}

.layout-col {
    direction: vertical
    gap: 16px
}

.layout-clean {
    width: fill
}

// ── Стили атомарных компонентов ──────────────────────────────────────────────

Header {
    color: $accent
    font-size: 20px
    padding: 2px
}

Text {
    @use text-body
}

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

Input {
    background-color: $bg-input
    color: $text-main
    font-size: 14px
    padding: 10px
    border-radius: 8px
    border-width: 1px
    border-color: $border-glow
    width: 240px
}

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

Divider {
    background: $border-glow
    border-width: 1px
}

Button {
    border-radius: 6px
    border-width: 1px
    padding: 8px
}

.btn-custom {
    background: #000000
}

Image {
    border-radius: 8px
    border-width: 1px
}

// ── Секция тестирования продвинутой геометрии Box-Model ──────────────────────

.geometry-box {
    @use standard-card
    background: #24253a
    border-color: #f38ba8
    border-width: 2px
    padding-top: 24px
    padding-bottom: 12px
    padding-left: 16px
    padding-right: 40px
    width: 320px
}

.margin-test-item {
    background: #a6e3a1
    padding: 8px
    margin-top: 12px
    margin-bottom: 4px
}

// ── Секция тестирования каскадного наследования (Inheritance) ────────────────

.inheritance-box {
    @use standard-card
    background: #181825
    padding: 12px
    color: #f9e2af
    font-size: 18px
}

.override-style {
    color: #f38ba8
    font-size: 12px
}

// ── Секция распределения весов Flex-Grow (Fill portions) ────────────────────

.flex-row-bar {
    background: $bg-surface
    direction: horizontal
    padding: 8px
    gap: 8px
    width: fill
}

.fill-10 {
    background: #f38ba8
    width: 10%
}

.fixed-120 {
    background: #f9e2af
    width: 50px
    color: #11111b
}

.fill-20 {
    background: #a6e3a1
    width: 20%
    color: #11111b
}

// ── СТИЛИ ДЛЯ ПРОВЕРКИ POSITION: FIXED ───────────────────────────────────────

.fixed-toast {
    position: fixed
    top: 20px
    right: 20px
    background: #a6e3a1
    border-radius: 8px
    padding: 12px
    border-width: 1px
    border-color: #a6e3a1
    color: #000
    font-weight: bold
}

.btn-close {
    background: transparen
    border-width: 0px
    padding: 2px
}




.scroll-test-box {
    @use standard-card
    background: #313244
    height: 150px
    width: 250px
    overflow-y: scroll
    padding: 10px
}


// ── Стили для тестирования Sticky Эффекта ────────────────────

.sticky-container {
    @use standard-card
    background: #181825
    padding: 12px
    gap: 8px
    width: fill
    height: 200px
    overflow-y: scroll
}

.sticky-header {
    position: sticky
    top: 0px
    background: #fab387
    padding: 10px 14px
    border-radius: 6px
    color: #11111b
    font-weight: bold
    font-size: 14px
    width: fill
}

.scroll-spacer {
    gap: 100px
    padding: 10px
    width: fill
}

// ── Стили для тестирования Opacity ────────────────────────────

.opacity-fade {
    background: #f38ba8
    padding: 12px
    border-radius: 8px
    opacity: 0.3
}

.opacity-mid {
    background: #a6e3a1
    padding: 12px
    border-radius: 8px
    opacity: 0.6
}

.opacity-subtle {
    background: #89b4fa
    padding: 12px
    border-radius: 8px
    opacity: 0.85
}

// ── Стили для тестирования Font-Weight ─────────────────────────

.fw-light {
    font-weight: 300
    color: $text-main
}

.fw-normal {
    font-weight: 400
    color: $text-main
}

.fw-bold {
    font-weight: 700
    color: $text-main
}

.fw-black {
    font-weight: 900
    color: $text-main
}

// ── Стили для тестирования Text-Align ──────────────────────────

.ta-box {
    background: #313244
    padding: 8px
    border-radius: 6px
    width: fill
}

.ta-left {
    text-align: left
}

.ta-center {
    text-align: center
}

.ta-right {
    text-align: right
}

// ── Стили для тестирования Line-Height ─────────────────────────

.lh-box {
    background: #313244
    padding: 8px
    border-radius: 6px
    width: 300px
}

.lh-tight {
    line-height: 0.8
}

.lh-normal {
    line-height: 1.2
}

.lh-loose {
    line-height: 2.0
}

// ── Стили для тестирования селекторов через запятую ────────────

.warning-text, .error-text {
    font-weight: bold
    padding: 8px
    border-radius: 6px
}

.warning-text {
    color: #f9e2af
    background: #3d3520
}

.error-text {
    color: #f38ba8
    background: #3d2020
}

// ── Стили для тестирования Display: None ───────────────────────

.hidden-box {
    background: #f38ba8
    padding: 12px
    border-radius: 8px
    display: none
}

.test-section-header {
    color: $accent
    font-size: 16px
    padding: 4px 0
    margin-top: 8px
}

.test-row {
    direction: horizontal
    gap: 12px
    align-items: center
}

// ── Стили для тестирования POSITION: ABSOLUTE ────────────────

.abs-demo-container {
    position: relative
    background: #313244
    padding: 16px
    margin-top: 8px
    border-radius: 8px
    width: fill
    gap: 8px
    min-height: 60px
}

.abs-demo-badge {
    position: absolute
    top: 10px
    right: 4px
    background: #f38ba8
    color: #11111b
    font-weight: bold
    font-size: 10px
    padding: 4px 8px
    border-radius: 4px
}

// ── Полноценная демка absolute-позиционирования ──────────────

.absolute-demo-section {
    @use standard-card
    background: #181825
    padding: 12px
    gap: 8px
    width: fill
}

.abs-stage {
    position: relative
    background: #24253a
    border-color: $accent
    border-width: 1px
    border-radius: 8px
    padding: 16px
    gap: 6px
    width: fill
    min-height: 80px
}

.abs-overlay {
    position: absolute
    top: 10px
    right: 10px
    background: #f38ba8
    border-radius: 6px
    padding: 8px 12px
    color: #11111b
    font-weight: bold
    font-size: 12px
    gap: 4px
}