body { font-family: sans-serif; margin: 20px; background-color: #f5f5f5; }
.directory-listing { background: white; border: 1px solid #ddd; padding: 20px; max-width: 800px; margin: 0 auto; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 10px; border-bottom: 2px solid #ddd; }
td { padding: 8px 10px; border-bottom: 1px solid #eee; }
.file-icon { width: 24px; height: 24px; margin-right: 8px; vertical-align: middle; }
.disabled { color: #999; text-decoration: line-through; }
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 90vh; /* Limit modal height to 90% of viewport height */
  overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
  width: 90%; /* Make modal responsive by default */
  max-width: 600px; /* Set a maximum width for larger screens */
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.button { background: #4CAF50; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
.button.admin { background: #2196F3; }
.tool-checkboxes { columns: 3; margin: 10px 0; }
.tool-checkboxes label { display: block; margin: 5px 0; }
.back-button { margin-right: 15px; }
.directory-header { display: flex; align-items: center; }


@media (max-width: 768px) {
  body {
    margin: 10px;
  }

  .directory-listing {
    padding: 10px;
  }

  /* Stack header elements vertically on mobile */
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  /* Allow horizontal scrolling for tables on mobile */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 600px; /* Minimum table width before scrolling */
  }

  /* Modal adjustments for mobile */
  .modal {
    width: 90%;
    max-width: none;
    padding: 15px;
  }

  /* Stack checkboxes vertically on mobile */
  .tool-checkboxes {
    columns: 1;
  }

  /* Adjust directory header spacing */
  .directory-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .back-button {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  /* Further adjustments for very small screens */
  .button {
    padding: 8px 12px;
    font-size: 14px;
  }

  td, th {
    padding: 6px 8px;
  }

  .file-icon {
    width: 20px;
    height: 20px;
  }
}



i.fa-solid.fa-folder-o {
        color: #0157b3
    }

i.fa-solid.fa-picture-o {
    color: #26b99a
}

i.fa-solid.fa-file-archive-o {
    color: #da7d7d
}

i.fa-solid.fa-file-archive-o {
    color: inherit
}

i.fa-solid.fa-css3 {
    color: #f36fa0
}

i.fa-solid.fa-file-code-o {
    color: #007bff
}

i.fa-solid.fa-code {
    color: #cc4b4c
}

i.fa-solid.fa-file-text-o {
    color: #0096e6
}

i.fa-solid.fa-html5 {
    color: #d75e72
}

i.fa-solid.fa-file-excel-o {
    color: #09c55d
}

i.fa-solid.fa-file-powerpoint-o {
    color: #f6712e
}