/* StreamLens V2 - Compact Styling */

/* Main Application Layout */
Screen {
    background: #0d0d0d;
}

#main-container {
    height: 1fr;
    background: #0d0d0d;
}

/* Metrics Bar - Ultra compact display at top */
#metrics-bar {
    height: 3;
    padding: 0;
    background: #1a1a1a;
    border-bottom: solid #0080ff;
    align: center middle;
}

MetricCard {
    width: 1fr;
    height: 3;
    margin: 0;
    max-width: 18;
    border: none;
    padding: 0;
    align: center middle;
}

/* Content Area - Maximized for grid */
#content-area {
    height: 1fr;
    padding: 0;
}

/* Panel Styling - No borders for clean look */
.panel {
    padding: 0;
    margin: 0;
}

.panel-wide {
    padding: 0;
    margin: 0;
}

.panel-header {
    text-align: center;
    text-style: bold;
    color: #00ffcc;
    margin-bottom: 1;
}

/* Left Panel - Main Flow Table (maximized) */
#left-panel {
    width: 75%;
    background: #1a1a1a;
    padding: 0;
}

/* Flow Panels - Details (30% width) */
#flow-panels {
    width: 30%;
    background: #1a1a1a;
    padding: 0;
}

FlowMainDetailsPanel {
    height: 2fr;
    background: #1a1a1a;
    border: solid #ff8800;
}

SubFlowDetailsPanel {
    height: 3fr;
    background: #1a1a1a;
    border: solid #ff8800;
}

/* Debug Panel - Fixed width when visible */
#debug-panel {
    width: 25%;
    background: #1a1a1a;
}

/* Sparkline Charts */
SparklineWidget {
    height: 5;
    margin-bottom: 1;
    padding: 0;
}

/* Enhanced Flow Table */
#flows-data-table {
    height: 1fr;
    scrollbar-background: #262626;
    scrollbar-color: #0080ff;
    scrollbar-size: 1 1;
}

#flows-data-table > .datatable--header {
    background: #333333;
    color: #00ffcc;
    text-style: bold;
}

#flows-data-table > .datatable--cursor {
    background: #0080ff 30%;
    color: #ffffff;
}

#flows-data-table > .datatable--hover {
    background: #0080ff 20%;
}

#flows-data-table > .datatable--odd-row {
    background: #1a1a1a;
}

#flows-data-table > .datatable--even-row {
    background: #262626;
}

/* Flow Details Panel - Compact */
FlowDetailsPanel {
    padding: 0;
}

FlowDetailsPanel Panel {
    margin-bottom: 0;
}

/* Status Colors */
.status-normal {
    color: #00ff88;
}

.status-warning {
    color: #ffcc00;
}

.status-error {
    color: #ff3366;
}

.status-enhanced {
    color: #00ffcc;
    text-style: bold;
}

/* Quality Indicators */
.quality-high {
    color: #00ff88;
}

.quality-medium {
    color: #ffcc00;
}

.quality-low {
    color: #ff3366;
}

/* Animations and Transitions */
.updating {
    background: #0080ff 10%;
    transition: background 200ms;
}

/* Header and Footer - Ultra compact */
Header {
    background: #1a1a1a;
    color: #ffffff;
    border-bottom: solid #0080ff;
    height: 1;
    padding: 0;
}

Footer {
    background: #1a1a1a;
    color: #999999;
    border-top: solid #0080ff;
    height: 1;
    padding: 0;
}

/* Scrollbars */
Vertical {
    scrollbar-size: 1 1;
    scrollbar-background: #262626;
    scrollbar-color: #0080ff;
}

Horizontal {
    scrollbar-size: 1 1;
    scrollbar-background: #262626;
    scrollbar-color: #0080ff;
}

/* Focus States */
DataTable:focus {
    border: solid #00ffcc;
}

/* Panel Borders - Removed for clean look */

/* Tabbed Content Styling */
TabbedContent {
    height: 1fr;
    background: #1a1a1a;
    dock: top;
}

TabbedContent > ContentSwitcher {
    height: 1fr;
    background: #1a1a1a;
}

/* Tab Bar Styling - Force horizontal layout */
TabbedContent > Horizontal {
    height: 3;
    background: #262626;
    dock: top;
}

TabbedContent Tabs {
    height: 3;
    background: #262626;
    color: #999999;
    dock: top;
}

TabbedContent Tab {
    padding: 0 2;
    background: transparent;
    color: #999999;
    text-style: none;
}

TabbedContent Tab:hover {
    background: #333333;
    color: #ffffff;
}

TabbedContent Tab.-active {
    background: #0080ff;
    color: #ffffff;
    text-style: bold;
}

TabbedContent Tab:disabled {
    color: #666666;
    text-style: dim;
}

/* Tab Pane Content */
TabPane {
    padding: 0;
    height: 1fr;
}

/* Frame Type Content Layout */
FrameTypeTabContent {
    height: 1fr;
    width: 1fr;
}

FrameTypeTabContent > Horizontal {
    height: 1fr;
}

FrameTypeFlowTable {
    width: 70%;
    height: 1fr;
    border: solid #666666;
}

FrameTypeStatsPanel {
    width: 30%;
    height: 1fr;
    border: solid #666666;
    padding: 1;
}

/* End of styles */