/* Tasks page styling. Extracted from tasks-content.html so theme
   overrides and edits live alongside the rest of the CSS. All
   colors reference theme variables — see themes/<name>/theme.css. */

/* Tasks Layout - Match Apps/Config Style */
.tasks-layout {
  display: flex;
  height: calc(100vh - 60px);
  background: transparent;
}

/* Sidebar Styles - Match existing LibrePortal style */
.sidebar-container {
  width: 220px;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.sidebar {
  width: 220px;
  height: 100%;
  overflow-y: auto;
}

.sidebar h2 {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-category {
  margin-bottom: 24px;
  padding: 0 20px;
}

.sidebar-category h3 {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s;
  font-size: 14px;
}

.sidebar-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-item.active {
  background: var(--accent-color);
  color: white;
}

.task-count {
  margin-left: auto;
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.sidebar-item.active .task-count {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Main Content Area */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
}

/* Status Bar — glassy strip matching the loading-screen system-card recipe. */
.terminal-status-bar {
  background: rgba(var(--text-rgb), 0.04);
  border-bottom: 1px solid rgba(var(--text-rgb), 0.08);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-queued { background: var(--status-warning); text-transform: uppercase !important; }
.status-running { background: var(--status-success); animation: pulse 1.5s infinite; text-transform: uppercase !important; }
.status-completed { background: var(--status-success); text-transform: uppercase !important; }
.status-failed { background: var(--status-danger); text-transform: uppercase !important; }

/* Force uppercase on all task status elements */
.task-status.status-queued,
.task-status.status-running,
.task-status.status-completed,
.task-status.status-failed,
.task-status.status-cancelled {
  text-transform: uppercase !important;
}

.status-installed {
  background: var(--status-success);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.refresh-btn {
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid rgba(var(--text-rgb), 0.12);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  margin-left: auto;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.refresh-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--accent);
}

.clear-btn {
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid rgba(var(--text-rgb), 0.12);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  margin-left: 8px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.clear-btn:hover {
  background: rgba(var(--status-danger-rgb), 0.18);
  border-color: rgba(var(--status-danger-rgb), 0.50);
  color: var(--status-danger);
}

/* Tasks Terminal */
.tasks-terminal {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tasks-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Hide scrollbar when not needed, show only when scrolling */
.tasks-list::-webkit-scrollbar {
  width: 8px;
}

.tasks-list::-webkit-scrollbar-track {
  background: transparent;
}

.tasks-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.tasks-list::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* Hide scrollbar by default, show only on hover or when content overflows */
.task-highlighted {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
}

.task-details-open {
  display: block !important;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Task Items — glass tiles in the loading-screen system-card style:
   light translucent fill, soft white border, inset top highlight, hover
   lifts the card with a cyan glow. */
.task-item {
  background: rgba(var(--text-rgb), 0.05);
  border: 1px solid rgba(var(--text-rgb), 0.10);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(var(--text-rgb), 0.06);
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}

.task-item:hover {
  background: rgba(var(--text-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.40);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(var(--text-rgb), 0.10);
}

.task-header {
  padding: 4px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.task-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.task-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.task-status {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Task-status PILL — glass tinted tag, matches the button language.
   Running/completed use a bright mint (#86efac) instead of the theme
   --status-success (#28a745) which reads as muddy olive against the
   nebula gradient. Same treatment used on the setup wizard's valid
   border + the apps "Installed" pill. */
.task-status.status-queued {
  background: rgba(var(--status-warning-rgb), 0.22);
  border: 1px solid rgba(var(--status-warning-rgb), 0.60);
  color: #fcd34d;
}
.task-status.status-running {
  background: rgba(var(--status-success-rgb), 0.35);
  border: 1px solid rgba(var(--status-success-rgb), 0.70);
  color: #86efac;
}
.task-status.status-completed {
  background: rgba(var(--status-success-rgb), 0.35);
  border: 1px solid rgba(var(--status-success-rgb), 0.70);
  color: #86efac;
}

/* Services persist when they're running; the pulse only makes sense
   for transient task state, so disable it on service rows. The .status-running
   class (line ~134) sets animation: pulse on anything that wears it — this
   overrides for service pills. Task pills still pulse. */
.service-item .task-status.status-running {
  animation: none;
}
.task-status.status-failed {
  background: rgba(var(--status-danger-rgb), 0.22);
  border: 1px solid rgba(var(--status-danger-rgb), 0.60);
  color: #fca5a5;
}

.task-command {
  color: var(--status-success);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  flex: 1;
}

.task-time {
  color: var(--text-muted);
  font-size: 10px;
  margin-right: 8px;
}

.task-actions {
  display: flex;
  gap: 6px;
}

.task-btn {
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid rgba(var(--text-rgb), 0.12);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.task-btn:hover {
  background: var(--surface-hover);
  color: var(--status-success);
  border-color: var(--status-success);
}

.task-btn.retry:hover {
  background: var(--status-warning);
  color: #000;
  border-color: var(--status-warning);
}

.task-btn.delete:hover {
  background: var(--status-danger);
  color: var(--text-on-accent);
  border-color: var(--status-danger);
}

.task-details {
  border-top: 1px solid rgba(var(--text-rgb), 0.10);
  background: transparent;
  padding: 14px 16px 4px;
  display: none;
}

.task-details.show {
  display: block;
}

.task-output {
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-muted);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  max-height: 200px;
  overflow-y: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .sidebar-container {
    position: fixed;
    left: -220px;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transition: left 0.3s ease;
  }

  .sidebar-container.mobile-open {
    left: 0;
  }

  .main-content {
    margin-left: 0;
  }

  .mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
  }

  .mobile-overlay.active {
    display: block;
  }
}

/* Loading Categories */
.loading-categories {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 12px;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(var(--text-rgb), 0.3);
  border-top: 2px solid var(--text-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Task metadata strip. style.css turns .task-meta into a grid of
   auto-fit columns, so the items wrap horizontally instead of stacking.
   Uses a dark-tint overlay (not a light-tint) so the white labels and
   values pop against the strip on nebula's gradient — the previous
   rgba(text, 0.10) lifted the strip towards white and washed out the
   text it was supposed to highlight. */
.task-meta {
  background: rgba(var(--bg-rgb), 0.30);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(var(--text-rgb), 0.10);
}

/* Bump label/value contrast inside the metadata strip — the global
   .meta-item uses --text-muted (65% alpha on nebula) which reads as
   dim grey. --text-secondary (82%) keeps the hierarchy vs the white
   <strong> labels but is actually readable. */
.task-meta .meta-item {
  color: var(--text-secondary);
}

/* Soften the log/output terminal box. The .log-container default is
   var(--surface-sunken) — on nebula that's rgba(0,0,0,0.22) which on
   top of the cosmic dark stack reads as pitch black and feels foreign
   to the rest of the glass UI. Anchor it to nebula's navy chrome with
   moderate opacity so the gradient still bleeds through faintly. */
.task-logs .log-container.terminal-style,
.task-output .output-content.terminal-style {
  background: rgba(15, 25, 50, 0.45);
  border: 1px solid rgba(var(--text-rgb), 0.10);
}

.meta-item {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 2px 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-item > strong {
  flex-shrink: 0;
}

.meta-item > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta-item code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
}

.task-duration {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.task-logs {
  margin-bottom: 16px;
}

.task-logs h4 {
  margin: 0 0 12px 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

.log-container {
  background: var(--surface-sunken);
  border-radius: 8px;
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
}

.log-entry {
  display: flex;
  align-items: flex-start;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
}

.log-entry:last-child {
  border-bottom: none;
}

.log-timestamp {
  color: var(--text-muted);
  margin-right: 12px;
  white-space: nowrap;
  font-size: 11px;
}

.task-output h4,
.task-error h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}

.task-output h4 {
  color: var(--status-success);
}

.output-content,
.error-content {
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid rgba(var(--text-rgb), 0.10);
  box-shadow: inset 0 1px 0 rgba(var(--text-rgb), 0.04);
  border-radius: 10px;
  padding: 12px;
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.error-content {
  background: rgba(var(--status-danger-rgb), 0.1);
  border-color: rgba(var(--status-danger-rgb), 0.3);
  color: var(--status-danger);
}

/* Original "task is running…" placeholder panel styling. The
   .task-running class is also used as a JS state marker on buttons
   and tab buttons (see app-tabbed-manager.js / apps-manager.js); the
   :not(...) chain keeps those out so they don't suddenly grow 20px
   of padding (and visibly jump taller) when a task starts. */
.task-running:not(button):not(.tab-button):not(.btn):not(.task-btn) {
  text-align: center;
  padding: 20px;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--status-warning-rgb), 0.3);
  border-top: 2px solid var(--status-warning);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.info-content {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
  font-style: italic;
}

/* Modal Styles */
.task-logs-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* These rules are scoped to .task-logs-modal so they don't override the
   generic modal styling in modal.css used by every other modal. */
.task-logs-modal .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.task-logs-modal .modal-content {
  position: relative;
  background: var(--bg-secondary);
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: var(--card-shadow-hover);
  border: 1px solid var(--border-subtle);
}

.task-logs-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(var(--text-rgb), 0.05);
}

.task-logs-modal .modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}

.task-logs-modal .modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.task-logs-modal .modal-close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.task-logs-modal .modal-body {
  padding: 24px;
  max-height: calc(80vh - 80px);
  overflow-y: auto;
}

.task-info-summary {
  background: rgba(var(--text-rgb), 0.05);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--border-subtle);
}

.info-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.info-row:last-child {
  border-bottom: none;
}

.info-row code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  margin-left: 8px;
}

.logs-section,
.output-section,
.error-section {
  margin-bottom: 20px;
}

.logs-section h4,
.output-section h4,
.error-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.log-viewer,
.output-viewer,
.error-viewer {
  background: var(--surface-sunken);
  border-radius: 8px;
  padding: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border-subtle);
  max-height: 300px;
  overflow-y: auto;
}

.log-viewer {
  max-height: 400px;
}

.log-line {
  display: flex;
  align-items: flex-start;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.log-line:last-child {
  border-bottom: none;
}

.log-line .timestamp {
  color: var(--text-muted);
  margin-right: 12px;
  white-space: nowrap;
  font-size: 11px;
  min-width: 140px;
}

.log-line .message {
  color: var(--text-primary);
  flex: 1;
  word-break: break-word;
}

.error-viewer {
  background: rgba(var(--status-danger-rgb), 0.1);
  border-color: rgba(var(--status-danger-rgb), 0.3);
  color: var(--status-danger);
}

/* Button enhancements */
.task-btn.view-logs {
  background: var(--accent-soft);
  color: var(--accent);
}

.task-btn.view-logs:hover {
  background: rgba(var(--accent-rgb), 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .modal-header,
  .modal-body {
    padding: 16px;
  }

  .log-line {
    flex-direction: column;
    gap: 4px;
  }

  .log-line .timestamp {
    min-width: auto;
  }

  /* Task + service rows: stack the row so info, status, and actions
     no longer fight for horizontal space. */
  .task-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }

  .task-info {
    flex-wrap: wrap;
    gap: 8px;
  }

  .task-title {
    flex: 1 1 100%;
    word-break: break-word;
  }

  .task-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Status bar: compress padding, allow refresh/clear to wrap below. */
  .terminal-status-bar {
    padding: 10px 12px;
    gap: 8px;
  }

  .refresh-btn,
  .clear-btn {
    margin-left: 0;
  }

  /* Task metadata strip: stack key/value pairs vertically. */
  .task-meta {
    padding: 10px 12px;
  }

  /* Services row container: trim outer margins so cards reach edge. */
  .services-rows {
    margin: 10px;
    padding: 10px;
  }
}
