/* Hands-on Project 8-4: retro terminal JSON question loader */

code {
   color: #ffd37c;
   font-family: "Courier New", Courier, monospace;
}

.file-note,
.local-file-help {
   margin-bottom: 1rem;
}

.local-file-help {
   color: #b9ffd0;
   font-size: 0.92rem;
}

.loader-controls {
   display: flex;
   align-items: end;
   gap: 1rem;
   padding: 1rem;
   border: 1px solid #2d8f4f;
   background-color: #08100b;
}

.file-control {
   display: grid;
   flex: 1;
   gap: 0.45rem;
}

.file-control label {
   color: #b9ffd0;
   font-weight: bold;
}

input[type="file"] {
   width: 100%;
   color: #d6ffe2;
   font: inherit;
}

input[type="file"]::file-selector-button,
button {
   padding: 0.7rem 1rem;
   border: 1px solid #35ff75;
   background-color: #12351f;
   color: #7cff9b;
   font: inherit;
   font-weight: bold;
   cursor: pointer;
}

input[type="file"]::file-selector-button:hover,
button:hover,
button:focus-visible {
   background-color: #7cff9b;
   color: #050807;
   box-shadow: 0 0 12px rgba(124, 255, 155, 0.8);
}

.control-divider {
   padding-bottom: 0.7rem;
   color: #b9ffd0;
}

.load-status {
   margin-top: 1rem;
   padding: 1rem;
   border: 1px solid #2d8f4f;
   border-left: 4px solid #35ff75;
   background-color: #08100b;
   color: #b9ffd0;
}

.load-status.success-message {
   border-color: #35ff75;
   color: #7cff9b;
   box-shadow: 0 0 12px rgba(124, 255, 155, 0.25);
}

.load-status.error-message {
   border-color: #ff6d6d;
   color: #ffd6d6;
}

.table-container {
   max-height: 650px;
   overflow: auto;
   border: 1px solid #2d8f4f;
}

.table-container table {
   min-width: 1200px;
   margin-top: 0;
   font-size: 0.88rem;
}

.table-container caption {
   padding: 1rem;
   background-color: #08100b;
   color: #b9ffd0;
   text-align: left;
}

.table-container th {
   position: sticky;
   top: 0;
   z-index: 1;
}

.table-container td {
   vertical-align: top;
}

.table-container td:nth-child(4),
.table-container td:nth-child(5) {
   white-space: pre-line;
}

.table-container td:first-child {
   color: #7cff9b;
   font-weight: bold;
   text-align: center;
}

.table-container ul {
   margin: 0;
   padding-left: 1.2rem;
}

.table-container li {
   margin-bottom: 0.35rem;
}

.question-code {
   display: block;
   margin-top: 0.65rem;
   padding: 0.65rem;
   border-left: 3px solid #35ff75;
   background-color: #050807;
   white-space: pre-wrap;
}

.difficulty-easy {
   color: #7cff9b;
}

.difficulty-standard {
   color: #ffd37c;
}

.difficulty-expert {
   color: #ff9b9b;
}

@media (max-width: 700px) {
   .loader-controls {
      align-items: stretch;
      flex-direction: column;
   }

   .control-divider {
      padding: 0;
      text-align: center;
   }

   button {
      width: 100%;
   }

}