/* =============== BASE STYLES =============== */

body {
  background-color: #0a0b0e;
  color: #fff;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header, nav {
  background-color: #0a0b0e;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.button {
  background-color: #1e88e5; /* Standard blue */
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 10px 15px;
  margin: 8px 0;
  text-decoration: none;
  display: inline-block;
}

.button:hover {
  background-color: #1565c0; /* Darker blue on hover */
  text-decoration: none;
}

/* Style for main navigation buttons */
nav a {
  background-color: #1e88e5;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 15px;
  margin: 0 6px;
  text-decoration: none;
}

nav a:hover {
  background-color: #1565c0;
  text-decoration: none;
}

/* Style for folder filter buttons */
.filter-button {
  background-color: #555; /* Default grey background */
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 7px 12px; /* Slightly smaller padding than general button */
  margin: 2px 4px; /* Spacing between filter buttons */
  text-decoration: none;
  display: inline-block;
  font-size: 0.9em; /* Slightly smaller font */
}

.filter-button:hover {
  background-color: #777; /* Lighter grey on hover */
  text-decoration: none;
}

/* Style for the ACTIVE folder filter button */
.filter-button-active {
  background-color: #1e88e5; /* Active filter is blue */
  color: #fff;
}

.filter-button-active:hover {
  background-color: #1565c0; /* Darker blue on hover for active */
}


.container {
  /* max-width: 1200px;*/
  margin: 0 auto;
  padding: 10px;
  background-color: #0a0b0e;
}

/* Inputs, selects */
input, select {
  background-color: #444;
  color: #fff;
  border: 1px solid #999;
  padding: 8px;
  margin: 5px 0;
  font-size: 1em;
}
input[type="number"] { /* Specific styling for number inputs if needed */
    padding: 5px;
}
input[type="time"] { /* Specific styling for time inputs */
    padding: 5px;
}


/* Table styling: remove fill color from table and cells */
table {
  width: 100%; /* Changed from fixed 1200px to be more responsive */
  border-collapse: collapse;
  margin-top: 10px;
}

table th, table td {
  border: 1px solid #404040;
  padding: 8px 12px;
  vertical-align: middle;
  text-align: center;
}

/* Logs color-coding */
.log-error {
  color: #ff4d4d; /* Brighter red */
}
.log-warning {
  color: #ffa726; /* Orange/Yellow */
}
.log-info {
  color: #66bb6a; /* Green */
}
.log-debug {
  color: #bdbdbd; /* Light grey */
}
.log-event { /* For SENT, PROMPT, CONFIRMED etc. */
  color: #4fc3f7; /* Light Blue */
}
.log-other {
  color: #ccc;
}


/* =============== MOBILE-SPECIFIC STYLES =============== */

@media screen and (max-width: 600px) {
  .container {
    width: 95%;
    margin: 0 auto;
    padding: 8px;
  }
  body {
    font-size: 1.1em;
  }
  .button {
    padding: 12px 18px;
    margin: 10px 0;
    font-size: 1.05em;
  }
  /* Main Mobile Nav is handled by inline style in HTML_TEMPLATE_MOBILE */

  /* Filter buttons on mobile */
  .filter-button, .filter-button-active {
      padding: 8px 10px;
      font-size: 0.9em;
      margin: 3px 2px;
  }

  table {
    /* Allow table to scroll horizontally on small screens */
    overflow-x: auto;
    display: block;
    margin-top: 8px;
    width: 100%;
  }
  table th, table td {
    white-space: nowrap; /* Prevent text wrapping in cells on mobile, rely on scroll */
    padding: 6px 8px;
  }
}

/* =============== END OF FILE =============== */