/* ================================================ */
/* FILE: mcpo_control_panel/ui/static/css/style.css */
/* ================================================ */

/* Base spacing and settings for Materialize, when defaults are not enough */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: #f4f4f8; /* Slightly different background for contrast with cards */
}

main {
  flex: 1 0 auto;
  padding-bottom: 20px; /* Bottom padding for content */
}

/* Enhancement for Materialize preloader in htmx-indicator */
.htmx-indicator.preloader-wrapper {
  display: inline-block; /* By default HTMX might make it block */
  opacity: 0;
  transition: opacity 200ms ease-in;
  vertical-align: middle; /* Center alignment with button text */
}
.htmx-request .htmx-indicator.preloader-wrapper {
  opacity: 1;
}
.htmx-request.htmx-indicator.preloader-wrapper { /* For elements that are indicators themselves */
  opacity: 1;
}

/* Customization for textarea in forms to make helper-text visible */
.input-field textarea + label {
  width: calc(100% - 0.75rem); /* To prevent label from overlapping with icon */
}
.input-field textarea ~ .helper-text {
  margin-bottom: 10px; /* Add bottom margin if textarea is the last element */
}

/* Small icons in text */
.material-icons.tiny {
  font-size: 1rem; /* or 1.2rem */
  vertical-align: text-bottom; /* or middle */
  margin-right: 3px;
}

/* For compact cards with settings and logs */
.card .card-content .collapsible {
  margin-top: 0;
  border: none;
  box-shadow: none;
}
.card .card-content .collapsible-header {
  font-weight: 500;
  padding: 0.75rem;
  background-color: rgba(0,0,0,0.03); /* Slightly darker header background */
}
.card .card-content .collapsible-body {
  padding: 1rem;
  border-bottom: none; /* Remove bottom border from body as it exists on list item */
}

/* More compact collection-item for tools list */
.collection.with-header .collection-item {
  padding: 10px 15px; /* Reduce padding */
}
.collection.with-header .collection-item p {
  margin: 5px 0 0 0; /* Reduce margins for description paragraph */
}

/* Fix for sidenav trigger to make it visible against nav background */
nav .sidenav-trigger i {
  color: white;
}

pre.log-container {
  background-color: #263238; /* Dark Material Design background (Blue Grey Darken 4) */
  color: #eceff1; /* Light text (Blue Grey Lighten 5) */
  padding: 15px;
  border-radius: 4px;
  max-height: 60vh; /* Limit height to avoid taking up the entire screen */
  overflow-y: auto; /* Enable vertical scrolling */
  font-family: 'Courier New', Courier, monospace; /* Monospace font */
  font-size: 0.9em; /* Slightly smaller font */
  white-space: pre-wrap;   /* Preserves spaces/line breaks but wraps long lines */
  word-break: break-all;   /* Forces very long words without spaces to break */
  border: 1px solid #37474f; /* Slightly lighter border (Blue Grey Darken 3) */
}

/* Style for code tag inside pre (usually not needed as pre inherits styles) */
pre.log-container code {
  display: block; /* Ensure code takes full width of pre */
  /* Can remove background/padding here if pre is styled */
}