/* One stylesheet, served from this origin. The Content-Security-Policy forbids
   inline styles and remote stylesheets, so everything the page looks like is
   here and nothing is fetched from a CDN. */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #16181d;
  --muted: #676e7d;
  --line: #e2e5ea;
  --accent: #1f5fd0;
  --accent-soft: #e8f0fd;
  --danger: #b4232b;
  --danger-soft: #fdeaea;
  --good: #1c7a4a;
  --warn-bg: #fdf6e3;
  --warn-border: #e6d4a3;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --panel: #1c1f25;
    --ink: #e8eaee;
    --muted: #9aa2b1;
    --line: #2b3038;
    --accent: #6ea2ff;
    --accent-soft: #1e2a3f;
    --danger: #ff8080;
    --danger-soft: #33201f;
    --good: #5fd39b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- chrome ---------------------------------------------------------- */

header.bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.brand span { color: var(--muted); font-weight: 400; }
.grow { flex: 1; min-width: 0; }

input[type="search"], input[type="password"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
input[type="search"]:focus, input[type="password"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

button {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: 7px 13px;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { filter: brightness(1.08); }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.danger:hover { filter: brightness(1.08); }
button.quiet { background: transparent; border-color: transparent; color: var(--muted); }
button.quiet:hover { color: var(--ink); background: var(--bg); }
button:disabled { opacity: 0.5; cursor: default; }

main { max-width: 1120px; margin: 0 auto; padding: 20px; }

/* ---- breadcrumb ------------------------------------------------------ */

nav.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
nav.crumbs button {
  border: none;
  background: none;
  padding: 2px 4px;
  font: inherit;
  color: var(--muted);
  border-radius: 6px;
}
nav.crumbs button:hover { color: var(--accent); background: var(--accent-soft); }
nav.crumbs .sep { color: var(--line); font-weight: 400; }
nav.crumbs .here { padding: 2px 4px; }

p.sub { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }

/* ---- folder grid ----------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.folder {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}
.folder:hover { border-color: var(--accent); }
.folder .icon { font-size: 22px; line-height: 1; flex: none; }
.folder .text { min-width: 0; }
.folder .name {
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder .meta { color: var(--muted); font-size: 12.5px; }
.folder.empty .name { color: var(--muted); font-weight: 450; }
.folder.trash { border-style: dashed; }

/* ---- file table ------------------------------------------------------ */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg); }
td.name { font-weight: 500; word-break: break-word; }
td.num, th.num { text-align: right; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
td.actions { text-align: right; white-space: nowrap; }
td.actions button { padding: 4px 10px; font-size: 13px; }

.ext {
  display: inline-block;
  min-width: 34px;
  margin-right: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  vertical-align: 1px;
}

.tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- drop zone ------------------------------------------------------- */

.dropzone {
  margin-top: 14px;
  padding: 22px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}
body.dragging .dropzone,
.dropzone.over {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.dropzone strong { color: var(--ink); }
.dropzone-actions { margin-top: 10px; }
body.dragging .dropzone strong, .dropzone.over strong { color: var(--accent); }

/* ---- upload queue ---------------------------------------------------- */

.uploads { margin-top: 14px; display: grid; gap: 8px; }
.upload {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13.5px;
}
.upload .state { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.upload.done .state { color: var(--good); }
.upload.failed { border-color: var(--danger); background: var(--danger-soft); }
.upload.failed .state { color: var(--danger); }
.upload .track { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; max-width: 180px; }
.upload .fill { height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; }

/* ---- dialog ---------------------------------------------------------- */

dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  padding: 0;
  max-width: 460px;
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.25);
}
dialog::backdrop { background: rgba(16, 24, 40, 0.45); }
dialog .body { padding: 20px 22px 16px; }
dialog h2 { margin: 0 0 10px; font-size: 17px; }
dialog p { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
dialog .filename {
  display: block;
  margin: 12px 0;
  padding: 9px 12px;
  background: var(--bg);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13.5px;
  word-break: break-word;
}
dialog .foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 22px 18px;
}
dialog .note {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  margin-top: 4px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
}

/* ---- odds and ends --------------------------------------------------- */

.empty-state { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty-state h2 { color: var(--ink); font-size: 16px; margin: 0 0 6px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13.5px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 90vw;
}
.toast button { background: none; border: none; color: inherit; text-decoration: underline; padding: 0; }
.toast.bad { background: var(--danger); color: #fff; }

.error {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13.5px;
}

/* ---- login ----------------------------------------------------------- */

body.login { display: grid; place-items: center; min-height: 100vh; }
.card {
  width: min(360px, 92vw);
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.card h1 { margin: 0 0 4px; font-size: 19px; }
.card p.sub { margin-bottom: 20px; }
.card label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.card button { width: 100%; margin-top: 14px; padding: 9px; }

/* ---- the deal level, and what it added ------------------------------- */

/* A section heading between two grids of folders. The borrower page shows
   deals and borrower-level folders one above the other, and without a heading
   apiece the two look like one list with a stripe through it. */
h2.section {
  margin: 26px 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

h2.section:first-child {
  margin-top: 4px;
}

/* A deal reads as a different kind of thing from a folder of documents, so it
   gets its own edge rather than only a different icon. */
.folder.deal {
  border-left: 3px solid var(--accent);
}

/* The degraded-names notice. Shown only when an index could not be read, which
   costs names and nothing else, so it explains rather than alarms. */
/* No virus scanner is configured, so every document filed here is recorded as
   unscanned. A strip under the header rather than a dialog or a toast: it is
   true on every screen and for as long as the instance is configured that way,
   so it has to be visible without being in the way, and it must not be
   dismissible. Muted rather than alarming, because this is the state somebody
   chose, not a fault. */
.scan-notice {
  margin: 0;
  padding: 7px 20px;
  border-bottom: 1px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}

.banner {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}

/* Which destination a queue of uploads is going to, stated once above the
   rows rather than repeated on each. */
.upload-target {
  margin: 4px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* The destination dialog's three menus. */
.field {
  display: block;
  margin: 14px 0 0;
}

.field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.field select {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.field select:disabled {
  color: var(--muted);
  background: var(--bg);
}

/* ---- making and removing folders ------------------------------------- */

/* The row of actions under the heading: New borrower, New deal, Delete this
   deal. One place, so a view with nothing to offer simply leaves it empty. */
.page-actions {
  display: flex;
  gap: 8px;
  margin: -4px 0 14px;
  flex-wrap: wrap;
}

.page-actions:empty { display: none; }

/* A destructive action that is not the main thing on the page. Quiet until it
   is hovered, because the confirmation is where the weight belongs. */
.danger-text { color: var(--danger); }
.danger-text:hover { border-color: var(--danger); background: var(--danger-soft); }

input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.field input[type="text"] { background: var(--panel); }

.field-error {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
}

/* The delete-a-deal note. Same shape as the ordinary one, in the colour of
   what it is about. */
dialog .note.danger-note {
  background: var(--danger-soft);
  color: var(--danger);
}

dialog .note.danger-note strong { color: inherit; }

button.danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- what a batch of uploads did -------------------------------------- */

/* Drawn after the folder refreshes, so the per-file outcome outlives the
   re-render that would otherwise wipe it off the page. */
.upload-summary {
  margin-top: 22px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.upload-summary .sub { margin-bottom: 10px; }

.upload-result {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--panel);
  font-size: 13.5px;
}

.upload-name { min-width: 0; word-break: break-word; }

.upload-result .state { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.upload-result.done .state { color: var(--good); }
.upload-result.dedup .state { color: var(--muted); }
.upload-result.failed { border-color: var(--danger); background: var(--danger-soft); }
.upload-result.failed .state { color: var(--danger); }

/* A file already filed at this address is not an error: nothing was written
   over and the document is where it should be. */
.upload.dedup .state { color: var(--muted); }

/* Uploaded, and waiting somewhere else for a scanner. Not a duplicate and not a
   failure, so it does not borrow either one's colour: the bytes are safe and the
   document is not in the folder yet, and the row has to read as both. */
.upload.queued .state,
.upload-result.queued .state { color: var(--accent); }
.upload-result.queued { border-color: var(--accent); }

/* Who is signed in, beside the way out. There is a person behind every change
   now, so the page says which one rather than leaving it to be assumed. */
.who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.who span {
  color: var(--muted);
  font-size: 13px;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}