* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body and general styles */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

header {
  /* text-align: center; */
  width: 100%;
  aspect-ratio: 3 / 1; /* height: 300px; */
  overflow: hidden; /* hide overflow so image is cropped */
  position: relative;
}

header img {
  width: 100%;         /* scale image to container width */
  height: 100%;
  display: block;  
  object-fit: cover; /* cover the entire header container */
  object-position: center 60%; /* show lower part of image */
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;;
  gap: 20px;
}

.syroco-image-container {
  width: 60%;        /* adjust to be bigger than login box but smaller than full screen */
  margin: 20px auto; /* center horizontally with vertical margin */
  max-width: 90vw;   /* limit max size */
}

.syroco-image-container img {
  width: 100%;
  height: auto;
  display: inline-block;
}


.login-container {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 320px;
    padding: 30px 25px;
    box-sizing: border-box;
    margin-bottom: 40px;
}

@media (max-width: 600px) {
  .login-container {
    width: 90%;  /* almost full width on phones */
    padding: 20px;
  }
}

.login-container form {
  display: flex;
  flex-direction: column;
  align-items: center;  /* center all children horizontally */
  gap: 10px;
}

.login-container .input-box {
  background-color: #cce6ff; /* light blue */
  padding: 10px 15px;
  width: 100%;
  border-radius: 6px;
  box-sizing: border-box;
}

.login-container input {
  background: transparent;  /* transparent to show blue box */
  border: none;
  width: 100%;
  font-size: 1rem;
  padding: 8px 0;
  margin: 0;
}

.login-container input:focus {
  outline: none;
  border-bottom: 2px solid #007bff;
}


@media (max-width: 600px) {
  .login-container input {
    font-size: 2rem;  /* larger font on phones */
    padding: 16px;      /* slightly bigger padding */
  }
}

.login-container button {
  font-size: 1.4rem;
  width: 100%;
  padding: 14px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.login-container button:hover {
  background-color: #0056b3;
}

footer {
  background-color: #f0f0f0; /* #777 */
  padding: 15px 0;
  text-align: center; /* center content */
  font-size: 0.9em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* space between logos */
}

.footer-logos img {
  max-height: 120px;
  max-width: 150px; /* limits wide logos */
  object-fit: contain; /* maintain aspect ratio */
  vertical-align: middle;
  margin: 0 10px;
}

.footer-logos img:first-child {
  max-height: 180px;    /* 120px * 1.5 = 180px */
  max-width: 225px;     /* 150px * 1.5 = 225px (if max-width is still 150px) */
}
  
.footer-copy {
  font-size: 0.8em;
  color: #555;
}


.jobs-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      font-family: Arial, sans-serif;
}
.jobs-table th, .jobs-table td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: left;
}
.jobs-table th {
      background-color: #f2f2f2;
      font-weight: bold;
}
.jobs-table tr:nth-child(even) {
      background-color: #f9f9f9;
}
.jobs-table tr:hover {
      background-color: #f5f5f5;
}
.status-queued {
      color: #856404;
      background-color: #fff3cd;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 0.9em;
}
.status-progress {
      color: #004085;
      background-color: #cce7ff;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 0.9em;
}
.status-generating {
      color: #0c5460;
      background-color: #bee5eb;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 0.9em;
}
.status-completed {
      color: #155724;
      background-color: #d4edda;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 0.9em;
      text-decoration: none;
}
.status-completed:hover {
      background-color: #c3e6cb;
      text-decoration: underline;
}
.submit-button {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      margin: 20px 0;
}
.submit-button:hover {
      background-color: #0056b3;
      text-decoration: none;
      color: white;
}
.no-jobs {
      text-align: center;
      color: #666;
      font-style: italic;
      padding: 20px;
}