/* =============================================================================
   LAZYGRADLE TUI STYLES
   =============================================================================

   Organization:
   1. Base Styles - Global element styling
   2. Layout System - Main containers and primitives
   3. Project Header - Project info display
   4. Task Viewer - Task list and details panels
   5. Modal Components - All modal dialogs
   6. Output Components - Task output display
   7. Utility Classes - Reusable helpers

   Design Tokens Used:
   - Colors: $surface, $panel, $boost, $primary, $text, $warning, $error
   - Borders: solid, thick
   - Spacing: 0, 1, 2 (in Textual grid units)

============================================================================= */

/* =============================================================================
   1. BASE STYLES
   ============================================================================= */

/* Application-wide base elements */
Header,
Footer {
  background: #333;
  color: white;
}

OptionList {
  width: 100%;
  background: $surface;
  border: solid $primary;
}

DirectoryTree {
  width: 100%;
  min-height: 20;
}

RichLog {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scrollbar-size: 2 1;
}

/* =============================================================================
   2. LAYOUT SYSTEM
   ============================================================================= */

/* Main container for app content */
#main-container {
  width: 100%;
  height: 1fr;
  background: $surface;
}

/* Primary application layout container */
.main-layout {
  width: 100%;
  height: 100%;
  background: $surface;
}

/* Main content area for tab content */
.main-content {
  width: 100%;
  height: 100%;
  background: $surface;
}

/* Tab content container */
#tab-content-container {
  width: 100%;
  height: 1fr;
  background: $surface;
}

/* =============================================================================
   3. PROJECT HEADER COMPONENTS
   ============================================================================= */

/* Project information header bar */
.project-header {
  width: 100%;
  height: 3;
  background: $boost;
  padding: 0 2;
  border-bottom: thick $primary;
  align-vertical: middle;
}

/* Project label text */
.project-label {
  width: auto;
  height: 1;
  padding: 0 1 0 0;
  color: $text;
}

/* Project name display */
.project-name {
  width: auto;
  height: 1;
  padding: 0 2 0 0;
}

/* Project path display */
.project-path {
  width: 1fr;
  height: 1;
  padding: 0;
}

/* Warning banner for project issues */
.project-warning {
  width: 100%;
  height: 3;
  background: $warning;
  padding: 1 2;
  text-align: center;
  border-bottom: thick $error;
}

/* No project selected state */
.no-project {
  text-align: center;
  color: gray;
  background: #f0f0f0;
}

/* =============================================================================
   4. TASK VIEWER COMPONENTS
   ============================================================================= */

/* Task viewer main widget */
.task-viewer {
  width: 100%;
  height: 1fr;
  background: $surface;
}

/* ----- Task List Panel (Left Side) ----- */

.task-list-panel {
  width: 40%;
  height: 100%;
  border-right: thick $primary;
  background: $surface;
  padding: 0;
}

/* Task search input field */
.task-search {
  width: 100%;
  height: auto;
  margin: 0 0 1 0;
  padding: 0 1;
  border: solid $primary;
  background: $surface;
}

/* Task list option list container */
.task-option-list {
  width: 100%;
  height: 1fr;
  max-height: 100%;
  overflow-y: auto;
}

/* ----- Task Details Panel (Right Side) ----- */

.task-details-panel {
  width: 60%;
  height: 100%;
  background: $surface;
  padding: 0;
}

/* Section title headers */
.section-title {
  width: 100%;
  height: auto;
  content-align: center middle;
  background: $boost;
  color: $text;
  text-style: bold;
  border-bottom: solid $primary;
  padding: 1 1;
}

/* Task name label in details view */
.task-name-label {
  width: 100%;
  height: auto;
  padding: 0 1;
  background: $panel;
  text-style: bold;
  border-bottom: solid $primary-lighten-1;
}

/* Scrollable task details container */
.task-details-scroll {
  width: 100%;
  height: auto;
  max-height: 50%;
  background: $surface;
  padding: 0;
  overflow-y: auto;
}

/* Task description text content */
.task-description-text {
  width: 100%;
  height: auto;
  padding: 1;
  background: $surface;
  color: $text;
}

/* ----- Recently Run Tasks ----- */

/* Recent tasks title */
.recent-tasks-title {
  margin-top: 0;
}

/* Recent tasks list */
.recent-tasks-list {
  width: 100%;
  height: 1fr;
  max-height: 30%;
  min-height: 6;
  border: solid $primary;
  background: $surface;
  overflow-y: auto;
}

/* ----- Task Actions ----- */

/* Action buttons container */
.task-actions {
  width: 100%;
  height: auto;
  padding: 0 1;
  background: $panel;
  border-top: solid $primary;
  align-horizontal: center;
}

/* Individual action buttons */
.action-button {
  min-width: 20;
  margin: 0 1;
}

/* =============================================================================
   5. MODAL COMPONENTS
   ============================================================================= */

/* ----- Base Modal Styles ----- */

/* Project chooser modal (full screen) */
.project-chooser-modal {
  width: 100vw;
  height: 100vh;
  background: $surface;
  border: thick $primary;
  padding: 0;
  overflow: hidden;
}

/* Run with parameters modal (centered) */
.run-params-modal {
  width: 100vw;
  height: auto;
  background: $surface;
  border: thick $primary;
  padding: 0;
  align: center middle;
}

/* Gradlew permission modal (centered) */
.gradlew-permission-modal {
  width: 80vw;
  max-width: 100;
  height: auto;
  background: $surface;
  border: thick $error;
  padding: 0;
  align: center middle;
}

/* Modal tabs container */
.modal-tabs {
  width: 100%;
  height: auto;
  background: $panel;
}

/* Tabbed content within modals */
.project-chooser-modal TabbedContent {
  width: 100%;
  height: 1fr;
}

/* Modal main content area */
.modal-content {
  width: 100%;
  height: 1fr;
  background: $surface;
}

/* Tab content area within modals */
.tab-content-area {
  width: 100%;
  height: 100%;
  padding: 0;
}

/* ----- Modal Sections ----- */

/* Section title within modals */
.modal-section-title {
  width: 100%;
  height: auto;
  padding: 1 2;
  background: $boost;
  text-align: center;
  border-bottom: solid $primary;
}

/* Project search input in modal */
.project-search {
  width: 100%;
  height: auto;
  margin: 1;
  padding: 0 1;
  border: solid $primary;
  background: $surface;
}

/* Scrollable content within modals */
.modal-scroll {
  width: 100%;
  height: 1fr;
  overflow-y: auto;
}

/* Modal option list */
.modal-option-list {
  width: 100%;
  height: 100%;
}

/* Status message display in modals */
.status-message {
  width: 100%;
  height: auto;
  padding: 1 2;
  background: $panel;
  text-align: center;
  color: $warning;
}

/* ----- Modal Buttons ----- */

/* Button bar at bottom of modals */
.modal-button-bar {
  width: 100%;
  height: auto;
  padding: 1 2;
  background: $panel;
  border-top: solid $primary;
  align-horizontal: center;
}

/* Individual modal buttons */
.modal-button {
  width: auto;
  min-width: 20;
  height: auto;
  margin: 0 1;
}

/* Modal title header */
.modal-title {
  width: 100%;
  height: auto;
  padding: 1 2;
  background: $boost;
  text-align: center;
  text-style: bold;
  border-bottom: thick $primary;
}

/* ----- Run Parameters Modal Specific Overrides ----- */

.run-params-modal .modal-scroll {
  max-height: 8;
  min-height: 3;
}

.run-params-modal .modal-section-title {
  padding: 0 2;
  height: auto;
}

.run-params-modal .status-message {
  padding: 0 2;
  height: auto;
}

.run-params-modal .modal-content {
  padding: 1;
  height: auto;
  width: 100%;
}

.run-params-modal .modal-button-bar {
  height: 20vw;
  width: 100%;
  padding: 1 2;
  align-horizontal: center;
}

.run-params-modal .modal-button {
  width: 30vw;
  height: 10vh;
  min-width: 20;
  max-width: 30;
  margin: 0 1;
}

/* Description text in run parameters modal */
.run-params-description {
  padding: 1 2;
  width: 100%;
  height: auto;
}

/* ----- Modal Tab Content ----- */

#switch-projects-content {
  width: 100%;
  height: auto;
}

#add-project-content {
  width: 100%;
  height: auto;
}

/* =============================================================================
   6. OUTPUT COMPONENTS
   ============================================================================= */

/* Main output widget container */
.output-widget {
  width: 100%;
  height: 100%;
}

/* Output log display */
.output-log {
  width: 100%;
  height: auto;
  background: $surface;
  border: solid $primary;
}

/* =============================================================================
   7. TASK MANAGER COMPONENTS
   ============================================================================= */

/* Task manager main widget */
.task-manager-widget {
  width: 100%;
  height: 100%;
  background: $surface;
}

/* Task manager container */
.task-manager-container {
  width: 100%;
  height: 100%;
}

/* Task list panel (left side) */
.task-manager-container .task-list-panel {
  width: 35%;
  height: 100%;
  border-right: thick $primary;
  background: $surface;
  padding: 0;
}

/* Task manager list */
.task-manager-list {
  width: 100%;
  height: 1fr;
  overflow-y: auto;
}

/* Clear history button */
.clear-history-button {
  width: 100%;
  margin: 0 0 1 0;
}

/* Task output panel (right side) */
.task-output-panel {
  width: 65%;
  height: 100%;
  background: $surface;
  padding: 0;
}

/* Task output scroll container */
.task-output-scroll {
  width: 100%;
  height: 1fr;
  overflow-y: auto;
}

/* Task manager output log */
.task-manager-output {
  width: 100%;
  height: 100%;
  background: $surface;
}

/* =============================================================================
   8. UTILITY CLASSES
   ============================================================================= */

/* Size warning container */
.size-warning-container {
  width: 100%;
  height: 100%;
  align: center middle;
}

/* Size warning message */
.size-warning-message {
  text-align: center;
  padding: 2;
  background: $surface;
  border: thick $error;
  width: auto;
  height: auto;
}
