/* Base app layout */
App {
  layout: vertical; /* Arranges children vertically */
}

#app-body {
  layout: vertical;
  height: 1fr; /* Takes up all available vertical space */
}

#app-grid {
  layout: vertical;
  height: 1fr; /* Takes up all available vertical space */
}

#tabs-container {
  height: 3; /* Fixed height for the tabs bar */
  dock: top; /* Docks the tabs to the top of the app */
  background: $surface; /* Background color from the theme */
}

Tab {
  color: $text-muted; /* Default text color for inactive tabs */
}

Tab:hover {
  background: $panel; /* Background color on hover */
}

Tab.-active {
  background: $primary; /* Primary color for the active tab */
  color: $foreground; /* Foreground color for the active tab */
}

Tabs .underline--bar {
  color: $primary; /* Color of the active tab underline */
}

/* Main content area where different views (price table, news, history) are displayed */
#output-container {
  layout: vertical;
  height: 1fr; /* Takes up all available vertical space */
}

#price-table {
  width: 1fr; /* Let table fill the width */
  height: 1fr; /* Let table fill the remaining vertical space */
}

#debug-table {
  width: auto; /* Width adjusts to content */
  height: auto; /* Height adjusts to content */
}

/* --- Style DataTable headers to pop --- */
DataTable > Header {
  background: $surface; /* Background color for table headers */
  color: $accent; /* Accent color for header text */
  text-style: bold; /* Bold text for headers */
}

/* Config container - initially hidden */
#config-container {
  display: none; /* Hidden by default */
  layout: vertical;
  height: 1fr;
  /* FIX: Scrolling is now handled by the child views, not the main container. */
  padding: 0 1; /* Padding on left and right */
}

/* FIX: New class to make all config child views scrollable. */
.config-view-child {
  height: 1fr;
  overflow-y: auto;
  scrollbar-color: $panel;
  scrollbar-color-hover: $accent;
}


/* Top config section with general settings and tab visibility */
#top-config-container {
  layout: horizontal;
  height: 28; /* Fixed height */
  margin-bottom: 0;
}

/* General settings panel (left side of top config) */
#general-settings-container {
  width: 1fr; /* Takes up available width */
  height: auto;
  layout: vertical;
  padding-right: 0;
}

/* Visibility settings panel (right side of top config) */
#visibility-settings-container {
  width: 1fr; /* Takes up available width */
  height: auto;
  layout: vertical;
  padding-left: 0;
}

#visible-tabs-container {
  padding: 0;
  margin-top: 0;
  border: round $primary; /* Rounded border with primary color */
  /* FIX: Use `1fr` to give the container a constrained height, allowing
     the content to overflow and the scrollbar to appear. `auto` would
     cause the container to grow indefinitely. */
  height: 1fr;
  overflow-y: auto;
  width: 100%;
}

#visible-tabs-container Checkbox {
  height: 3;
  padding: 0 0;
  color: $foreground;
  content-align: left middle; /* Aligns content to the left and middle */
  width: 100%;
}

/* List management section (bottom part of config view) */
#list-management-container {
  layout: horizontal;
  height: 27; /* Fixed height */
  min-height: 15;
}

/* List view container (left side of list management) */
#list-view-container {
  width: 40%; /* Takes up 40% of the width */
  height: 100%;
  layout: vertical;
  border: round $primary;
  padding: 0 0;
}

/* Ticker view container (right side of list management) */
#ticker-view-container {
  width: 1fr; /* Takes up remaining width */
  height: 100%;
  layout: vertical;
  border: round $primary;
  padding: 0 0;
}

/* Styling for ListView and DataTable within config */
#symbol-list-view,
#ticker-table {
  height: 10; /* Fixed height */
  border: none; /* No border */
}

#list-view-container ListItem.active-list-item {
  background: $accent; /* Accent color for active list item background */
  color: $foreground; /* Foreground color for active list item text */
}

/* Button containers for list and ticker management */
#list-buttons,
#ticker-buttons-container {
  height: auto;
  layout: vertical;
  padding-top: 0;
}

#list-buttons Button,
#ticker-buttons-container Button {
  width: 100%; /* Buttons take full width */
  margin-bottom: 0;
}

/* Input styling */
#refresh-interval-input {
  width: 1fr; /* Takes up available width */
}

#search-box:focus {
  outline: tall $accent; /* Highlight search box on focus */
}

#update-refresh-interval {
  width: auto;
  min-width: 8;
  margin-left: 1;
}

/* Debug Tab Buttons */
.debug-buttons {
  height: auto;
  align: center middle; /* Centers buttons horizontally and vertically */
  padding: 1 0;
}

.debug-buttons Button {
  margin: 0 1; /* Margin between buttons */
}

/* History Tab Controls */
.history_controls {
  height: 4;
  align: center middle;
  padding: 0 0;
  width: 100%;
}

#history-ticker-select {
  width: 1fr;
}

#history-ticker-input {
  width: 1fr;
  margin-left: 1;
}

#history-range-select {
  width: 73;
  layout: horizontal;
  height: auto;
}

#history-range-select RadioButton {
  height: 1;
  max-width: 8;
  align: center middle;
  padding: 0 0;
  margin-right: 1;
}

#history-view-toggle {
  height: auto;
  width: auto;
  margin-left: 2;
}

#history-display-container {
  height: 1fr;
  overflow: auto;
  scrollbar-color: $panel;
  scrollbar-color-hover: $accent;
}

#debug-output-container {
  height: 1fr;
}

/* Status bar at the bottom of the app */
#status-bar-container {
  layout: horizontal;
  width: 100%;
  height: 1;
  align: left middle;
}

#market-status {
  padding-left: 1;
  color: $foreground;
  opacity: 0.7;
}

#last-refresh-time {
  width: 1fr;
  content-align: right middle;
  padding-right: 1;
  color: $foreground;
  opacity: 0.7;
}

/* etc. */
#dialog {
  grid-size: 2;
  grid-gutter: 1 2;
  width: 60;
  height: auto;
  border: thick $primary 80%;
  background: $surface;
  padding: 1 2;
}

#dialog > Label {
  width: 100%;
  margin-bottom: 0;
}

#dialog-buttons {
  width: 100%;
  align-horizontal: right;
  height: auto;
  padding-top: 1;
}

#dialog-buttons Button {
  margin-left: 2;
}

.config-option-stacked {
  height: auto;
  margin-bottom: 1;
}

.config-option-stacked > Label {
  margin-bottom: 0;
}

.config-header {
  text-style: bold;
  background: $primary;
  color: $text;
}

#info-message {
  width: 100%;
  height: 100%;
  content-align: center middle;
  color: $foreground;
  opacity: 0.7;
}

#news-output-display {
  height: 1fr;
  overflow-y: auto;
  scrollbar-color: $panel;
  scrollbar-color-hover: $accent;
}

.news-controls {
  height: 5; /* Input height (3) + 2*padding (1+1) */
}

/* Style the source ticker in the news view */
Markdown .strong > .code {
  color: $secondary;
  text-style: bold; /* Ensure it remains bold */
  background: $surface; /* Match background for seamless look */
}

Footer {
  align-horizontal: right;
}

/* Portfolio selector styling */
#portfolio-container {
  height: auto;
  padding: 1;
  background: $surface;
  border-bottom: solid $primary;
}

#portfolio-selector-container {
  layout: horizontal;
  height: 3;
  align: center middle;
}

#portfolio-label {
  width: auto;
  padding-right: 1;
  color: $foreground;
  align: center middle;
}

#portfolio-selector {
  width: 30;
  margin-right: 2;
}

#manage-portfolios {
  width: auto;
}

.vertical-center {
  align: center middle;
  height: 1fr;
}

.spacer {
  height: 1;
}

/* Tag Filter Widget Styles */
#tag-filter {
  height: 12;
  padding: 0 1;
  margin-bottom: 1;
}

#tag-filter-controls {
  height: auto;
  width: 100%;
  align: left middle;
}

.tag-filter-label {
  width: auto;
  height: 8;
  margin-right: 1;
  color: $text-muted;
  content-align: center middle;
}

.tag-buttons-container {
  layout: grid;
  grid-size: 5 2;
  width: 1fr;
  height: 8;
}

.tag-button {
  width: 1fr;
  height: 4;
  margin: 0 1 1 0;
  min-width: 12;
  padding: 0 2;
  color: $text;
  background: $surface;
  border: solid $primary;
}

.tag-button:hover {
  background: $surface-lighten-1;
  color: $text;
}

.tag-button.-primary {
  background: $primary;
  color: $background;
}

#clear-filter-button {
  width: auto;
  min-width: 8;
  height: 3;
  margin-left: 2;
}

#filter-status {
  width: 100%;
  height: 3;
  margin-top: 1;
  padding: 1;
  color: $text;
  background: $surface;
}

.config-hub-button {
    width: 50%;
    height: 5;
}