:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --text: #1d2330;
  --muted: #6b7280;
  --border: #dde1e7;
  --accent: #2f5fd0;
  --danger: #c0392b;
  --ok-bg: #e7f5ec;
  --ok-text: #1e6b3a;
  --err-bg: #fbeaea;
  --err-text: #8f2a20;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 12px 24px;
  background: var(--text);
}
.topbar a, .topbar .link { color: #e5e9f0; text-decoration: none; }
.topbar a:hover, .topbar .link:hover { color: #fff; text-decoration: underline; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; }
.brand-logo { height: 24px; width: auto; display: block; }
.brand-app { padding-left: 12px; border-left: 1px solid rgba(229, 233, 240, 0.35); font-weight: 600; }

/* One flowing sentence: as flex items the two halves broke mid-sentence. */
.assurance {
  max-width: 1160px;
  margin: 8px auto 32px;
  padding: 0 24px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.assurance-item { display: inline; }
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }

/* Full width: the file and user tables have many columns (name, owner, note,
   size, time, actions) and are the point of the app, so they get all the room
   the window has. Forms that would look silly stretched that far cap
   themselves instead (.card.narrow, the note and password fields). */
main { max-width: none; margin: 24px auto; padding: 0 24px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 20px;
  overflow-x: auto;
}
.card.narrow { max-width: 420px; margin: 40px auto; }
h1 { font-size: 18px; margin: 0 0 16px; }

form label { display: block; margin-bottom: 12px; font-weight: 500; }
form label input:not([type=checkbox]) { display: block; width: 100%; margin-top: 4px; }
form.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; align-items: end; }
form.grid label, form.grid button { margin-bottom: 12px; }
label.checkbox { font-weight: 400; padding-bottom: 8px; }
form.inline { display: inline; }

input { font: inherit; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; }
input[type=file] { border: none; padding: 0; margin-right: 12px; }

button, .button {
  display: inline-block;
  font: inherit;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
button:disabled { opacity: 0.5; cursor: default; }
button.secondary, .button.secondary { background: transparent; color: var(--accent); }
button.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
button.link { background: none; border: none; padding: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 13px; color: var(--muted); font-weight: 600; }
.num { text-align: right; white-space: nowrap; }
/* Long names must be able to wrap, but `word-break: break-all` splits them one
   character per line in a narrow column; `anywhere` breaks at spaces and
   punctuation first and only splits a word when it has to. */
.filename { overflow-wrap: anywhere; min-width: 120px; }
.actions { white-space: nowrap; text-align: right; }
.actions > * { margin-left: 6px; }
.muted { color: var(--muted); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok-text); }
.badge.off { background: var(--err-bg); color: var(--err-text); }
.badge.warn { background: #fdf3e2; color: #8a5a10; }
tr.inactive td:not(.actions) { color: var(--muted); }
.added-by { font-size: 12px; color: var(--muted); }
.nowrap { white-space: nowrap; }
textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; width: 100%; resize: vertical; }
form label textarea { display: block; margin-top: 4px; }
form.grid .span-all { grid-column: 1 / -1; }
.note-form { margin-top: 20px; max-width: 900px; }
.note-form label { margin-bottom: 4px; }
.note-form input[type=text] { flex: 1 1 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.small { font-size: 13px; margin: 6px 0 0; }
td.agent { font-size: 12px; color: var(--muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.note-preview { font-size: 13px; }
/* Wide enough to be useful, narrow enough that the Users table still fits a
   1280px window without scrolling sideways; the full note is the title. */
.note-preview > * {
  display: block;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-preview a:not([title]) { color: var(--muted); }
td.username { overflow-wrap: anywhere; min-width: 120px; }
.protected { display: inline-block; margin-left: 6px; font-size: 13px; color: var(--muted); cursor: help; }
.notice { margin: -6px 0 16px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--bg); border-radius: 4px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(29, 35, 48, 0.55);
  animation: modal-fade 120ms ease-out;
}
.modal {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border-radius: 10px;
  padding: 22px 24px 18px;
  box-shadow: 0 12px 40px rgba(29, 35, 48, 0.3);
  animation: modal-rise 120ms ease-out;
}
.modal h2 { margin: 0 0 10px; font-size: 17px; }
.modal.danger h2 { color: var(--danger); }
.modal-message { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
button.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }

@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal { animation: none; }
}

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; background: var(--err-bg); color: var(--err-text); }
.flash.success { background: var(--ok-bg); color: var(--ok-text); }

button.small { padding: 3px 10px; font-size: 13px; }
[hidden] { display: none !important; }

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 28px 16px;
  text-align: center;
}
.dropzone-title { margin: 0 0 14px; font-weight: 500; }
.dropzone-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

#drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 95, 208, 0.12);
  border: 3px dashed var(--accent);
  pointer-events: none;  /* keep drag events on the page underneath */
}
#drop-overlay div {
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 8px;
}

.queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
  font-weight: 500;
}
#upload-queue { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 160px 190px 70px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.q-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-size { text-align: right; color: var(--muted); white-space: nowrap; }
.queue-item progress { width: 100%; height: 12px; }
.q-status { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-item.done .q-status { color: var(--ok-text); }
.queue-item.failed .q-status { color: var(--err-text); }
.queue-item.cancelled { opacity: 0.6; }

@media (max-width: 640px) {
  .queue-item { grid-template-columns: minmax(0, 1fr) auto; }
  .queue-item progress { grid-column: 1 / -1; }
}