/* Theme variables (dark/light + toggle overrides) live in auth.css, which
   .index.php always loads alongside this file. */

body { font-family: sans-serif; margin: 0; background-color: var(--auth-bg); color: var(--auth-text); }
/* No generic top-level `a` rule here on purpose: every link on the top-level
   page styles itself (.app-card, .i-brand, .i-nav a, .button in the header),
   and a bare `.root a { text-decoration: underline }` used to outrank all of
   them by specificity, forcing blue underlined text onto the brand link and
   every app card regardless of what those rules said. */
a { color: var(--auth-accent-hover); text-decoration: underline; }
a:visited { color: var(--auth-accent-hover); }
.directory-listing { padding: 20px 20px 40px; max-width: 800px; margin: 0 auto; }
/* The subdirectory file browser (not the top-level app grid) still gets a
   boxed, bordered look — a plain file table needs the container to read as
   a distinct panel. */
body:not(.root) .directory-listing {
    background: var(--auth-card);
    border: 2px solid var(--auth-border-strong);
    box-shadow: 3px 3px 0 var(--auth-border-strong);
    margin-top: 20px;
}
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 10px; color: var(--auth-muted); border-bottom: 2px solid var(--auth-border); }
td { padding: 8px 10px; border-bottom: 1px solid var(--auth-border); }
td i { display: inline-block; margin-right: 8px; width: 20px; text-align: center; }
tr:hover td { background: var(--auth-hover-tint); }
.disabled { color: var(--auth-muted); text-decoration: line-through; }
.launcher-group { padding: 16px; margin-bottom: 20px; }
.launcher-group-title { margin: 0 0 12px; }
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--auth-card);
  color: var(--auth-text);
  padding: 20px;
  border: 1px solid var(--auth-border);
  border-radius: 14px;
  box-shadow: 0 20px 40px var(--auth-shadow);
  z-index: 1000;
  max-height: 90vh;
  overflow-y: auto;
  width: 90%;
  max-width: 600px;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}
.button {
    background: var(--auth-accent);
    color: white;
    padding: 7px 14px;
    border: 2px solid var(--auth-border-strong);
    border-radius: 0;
    cursor: pointer;
    font-family: var(--i-mono, ui-monospace, monospace);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    box-shadow: 2px 2px 0 var(--auth-border-strong);
    transition: transform .05s, box-shadow .05s;
}
.button:hover { background: var(--auth-accent-hover); }
.button:active { transform: translate(2px, 2px); box-shadow: none; }
.button.admin { background: var(--auth-surface); color: var(--auth-text); }
.button.admin:hover { background: var(--auth-border); }
.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; }
.directory-header a, .directory-header h1 { color: var(--auth-text); }

@media (max-width: 768px) {
  .directory-listing { padding: 14px 14px 30px; }
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  .modal { width: 90%; max-width: none; padding: 15px; }
  .tool-checkboxes { columns: 1; }
  .directory-header { flex-wrap: wrap; gap: 10px; }
  .back-button { margin-right: 0; margin-bottom: 10px; }
}

@media (max-width: 480px) {
  td, th { padding: 6px 8px; }
}