/* Bare nginx: plain, no chrome, no dark mode inversion. The stock nginx
   page is a centred column of unstyled text between two <hr> rules. */

html { overflow-x: hidden; }

body {
  width: 62em;
  max-width: 100%;
  margin: 2em auto;
  /* Side padding keeps text off the screen edge on a phone, and stops the
     listing running wall-to-wall. Scales up on wider screens. */
  padding: 0 1em;
  box-sizing: border-box;
  /* A nested folder's share form is intrinsically wider than a narrow
     screen; keep that from turning into a sideways-scrolling page. */
  overflow-x: hidden;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
  background: #fff;
}

h1 { font-size: 1.4em; font-weight: normal; margin: 0 0 0.2em; }
h2 { font-size: 1.15em; font-weight: normal; margin: 1.2em 0 0.3em; }
h3 { font-size: 1em; font-weight: normal; margin: 0.9em 0 0.2em; }
strong { font-weight: bold; }

/* FAQ list: terms in the left gutter, plain text elsewhere. */
ul.faq { padding-left: 1.2em; }
ul.faq li { margin: 0.35em 0; }

a { color: #00e; text-decoration: none; }
a:visited { color: #551a8b; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid #ccc; margin: 0.4em 0; }

/* The listing. nginx emits a <pre> grid; we use CSS grid so the template's
   own whitespace can never leak in as blank lines. */
.crumbs { color: #666; margin-bottom: 0.3em; }
.crumbs a { color: #00e; }

.treebox ul, ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; }

/* Hierarchy guide. Each folder that has children draws a vertical rule at
   its children's indent, running from the folder's own row all the way down
   through its last descendant. That is what makes a file carry a visible
   line back to the folder holding it. */
ul.tree ul {
  margin-left: 0.55em;
  padding-left: 1.05em;
}
/* Critical: a nested <ul> sits INSIDE a flex <li>, so it would otherwise
   become a flex item of its own and lay its children out horizontally.
   Forcing it back to block is what makes the guide line run the full
   height of the folder's contents instead of hugging one row. */
/* box-sizing matters here: a nested <ul> is width:100% *plus* padding-left
   and margin-left, which without border-box pushes the listing wider than
   the viewport on a phone. */
ul.tree ul { display: block; flex: 0 0 auto; box-sizing: border-box; width: 100%; }

li.dir, li.file {
  display: flex;
  align-items: baseline;
  gap: 0 1.5ch;
  line-height: 1.35;
}
/* A folder's own row holds only the folder link; its children go below.
   flex-wrap lets the nested <ul> drop onto its own line. */
li.dir { flex-wrap: wrap; }

/* The rule is drawn on the folder <li>, not on the nested <ul>, so it
   starts at the folder's own row rather than one row below it. top:0 /
   bottom:0 spans the entire subtree without hard-coding a row height.
   :has() means a childless folder draws nothing. */
li.dir { position: relative; }
li.dir:has(> ul)::before {
  content: "";
  position: absolute;
  top: 0.35em;
  bottom: 0.35em;
  left: 0.55em;
  border-left: 1px solid #e4e4e4;
  pointer-events: none;
}
li.dir > .row, li.file > .row { flex: 0 1 auto; }
li.dir > .rowmeta, li.file > .rowmeta { flex: 0 0 auto; margin-left: auto; }
li.dir > .ops, li.file > .ops { flex: 0 0 auto; }

/* Date, time and size are three separate fixed-width right-aligned columns
   so they form the vertical rules nginx's autoindex produces, and a long
   time can never run into a size. */
.rowmeta {
  color: #666;
  display: inline-flex;
  justify-content: flex-end;
  gap: 1.5ch;
  min-width: 22ch;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rowmeta .dcol { min-width: 11.5ch; text-align: right; }
.rowmeta .tcol { min-width: 5ch; text-align: right; }
.rowmeta .dsz  { min-width: 5ch; text-align: right; }
/* Two forms of the date; CSS picks one by width. */
.rowmeta .d-full { display: inline; }
.rowmeta .d-short { display: none; }
.rowmeta .dsz { display: inline; }

.tag {
  flex: 0 0 auto;
  background: #000;
  color: #fff;
  padding: 0 0.3em;
  font-size: 0.8em;
}

/* Row actions. "manage" is plain inline text in the row, like the links in
   a bare nginx listing; it opens the one shared popup. */
.ops-open {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 1em;
  color: #999;
  background: none;
  border: 0;
  padding: 0 0 0 0.6em;
  cursor: pointer;
  text-decoration: none;
}
.ops-open:hover { color: #000; text-decoration: underline; }
.ops-open:focus-visible { outline: 1px dotted #666; }

/* The last resort, made to look like one. */
.danger { color: #c00; }
.danger:hover { text-decoration: underline; }

/* The shared popup, positioned by ops.js next to the row that opened it. */
.ops-pop {
  position: absolute;
  z-index: 50;
  min-width: 22em;
  max-width: 30em;
  padding: 0.5em 0.8em 0.7em;
  border: 1px solid #bbb;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  font-size: 0.9em;
}
.ops-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.3em;
  margin-bottom: 0.4em;
  font-weight: bold;
}
.ops-head button {
  border: 0;
  background: none;
  color: #999;
  font-size: 1.1em;
  line-height: 1;
  padding: 0 0.2em;
  cursor: pointer;
}
.ops-head button:hover { color: #000; }
.ops-body { display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; }
.ops-sec { margin-top: 0.7em; }
.ops-lab { color: #666; margin-bottom: 0.15em; }
.ops-pop form { margin: 0.15em 0; display: flex; gap: 0.35em; align-items: center; }
.ops-pop input, .ops-pop select { min-width: 0; }
.muted { color: #888; }
.linkrow { display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; margin: 0.15em 0; }
.chip { font-size: 0.9em; }

.bar {
  margin-top: 1.5em;
  padding-top: 0.5em;
  border-top: 1px solid #ccc;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 0.9em;
  flex-wrap: wrap;
}
.small { font-size: 0.85em; }
.error { color: #c00; }
.inline { display: inline; }
#newfolderform { display: inline-flex; gap: 0.35em; align-items: center; }
#newfoldername { width: 9em; }

table { border-collapse: collapse; margin: 0.5em 0; }
th, td { border: 1px solid #bbb; padding: 0.2em 0.5em; font-size: 0.9em; text-align: left; }
th { font-weight: normal; }

input, select, button { font-family: inherit; font-size: 0.9em; padding: 0.1em 0.3em; }
button { cursor: pointer; }
code { background: #f0f0f0; padding: 0 0.2em; }

body.dragging { outline: 3px dashed #666; outline-offset: -3px; }

/* ───────────────────────────────────────────────
   Narrow screens. Keep it a *listing*, not a stack
   of cards: one tight row per file, no dividers,
   no boxy padding. The name takes the space it
   needs (truncating if it must) and the date/size
   stays on the same line, right-aligned, in a
   compact form. Only if even that will not fit
   does the metadata drop to a second line.
   ─────────────────────────────────────────────── */
@media (max-width: 40em) {
  body { margin: 1em auto; padding: 0 0.9em; font-size: 15px; }

  h1 { font-size: 1.25em; }

  ul.tree ul { padding-left: 1.1em; }

  li.dir, li.file {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.8em;
    /* Compact: no divider, no block padding. Rows sit shoulder to
       shoulder the way an autoindex does. */
    padding: 0;
    border: 0;
    line-height: 1.5;
    /* Keep the row's contents inside it: without this, a long name plus
       the metadata plus the trigger can add up past the viewport. */
    max-width: 100%;
    box-sizing: border-box;
  }
  li.dir > .row, li.file > .row {
    /* Grow to fill, but give up before pushing the metadata off. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  li.dir > .rowmeta, li.file > .rowmeta {
    flex: 0 0 auto;
    /* No longer 22ch: on a phone that alone was half the row. */
    min-width: 0;
    margin-left: 0;
    color: #666;
    font-size: 0.8em;
    text-align: right;
    white-space: nowrap;
  }
  /* Compact date on narrow screens: the full "28-Sep-2026 04:49" is the
     least useful half of the row and the main reason it read as a data
     table instead of a list. */
  .rowmeta .d-full { display: none; }
  .rowmeta .d-short { display: inline; }
  /* Time is the least load-bearing of the three on a phone: out entirely.
     The folder dash lives in the size column so folder rows and file rows
     still align their last field. */
  .rowmeta .tcol { display: none; }
  .rowmeta .dcol { min-width: 0; }
  .rowmeta .dsz  { min-width: 5ch; }
  /* When even the short form won't fit, it wraps under the name and
     spans the full width rather than being squeezed. */
  li.dir > .rowmeta, li.file > .rowmeta { max-width: 100%; }
  li.dir > .tag, li.file > .tag { flex: 0 0 auto; }
  li.dir > .ops, li.file > .ops { flex: 0 0 auto; margin-left: auto; }

  .ops-open {
    /* A bordered button on mobile so it reads as tappable, but sized to
       its text so it does not inflate the row. The 44px touch target is
       supplied by ::after below. */
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    color: #999;
    padding: 0 0 0 0.6em;
    border: 0;
    background: none;
  }
  /* The 44px target is reached with a pseudo-element, so the button itself
     stays the height of its text and the listing rows stay compact. */
  .ops-open::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  .ops-open { position: relative; }
  .ops-open:active { background: #eee; }

  .bar { gap: 0.7em 0.9em; }
  .bar form { display: flex; gap: 0.5em; flex-wrap: wrap; align-items: center; }

  /* On a phone the popup becomes a bottom sheet: anchoring it to a row on a
     390px screen leaves no room, and the controls need full-width targets.
     box-sizing matters here - without it, padding and borders add to the
     declared width and the sheet overflows the viewport sideways. */
  .ops-pop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 0;
    border-top: 1px solid #bbb;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5em 0.9em 1em;
    margin: 0;
    font-size: 1em;
  }
  .ops-pop input,
  .ops-pop select,
  .ops-pop button {
    min-height: 44px;
    font-size: 1em;
  }
  .ops-pop input[name="path"],
  .ops-pop input[name="grantee"],
  .ops-pop input[name="password"],
  .ops-pop input[name="expires_in_hours"],
  .ops-pop input[name="max_uses"] {
    width: 100%;
    box-sizing: border-box;
  }
  .ops-pop form { gap: 0.5em; }
  /* Short words like "link" otherwise come out narrower than the 44px
     minimum target; a little horizontal padding fixes that. */
  .ops-pop button { min-width: 44px; padding: 0 0.8em; }
  /* Bigger checkbox hit area. */
  .bar input[type="checkbox"] { width: 22px; height: 22px; }

  table { display: block; overflow-x: auto; }
}

/* Very narrow: drop the date's time part, which is the least useful half
   when space is this tight. */
@media (max-width: 26em) {
  .rowmeta { font-size: 0.8em; }
}