/* Omarchy-styled: one monospace face, dense rows, the active theme's palette
   from themes.json applied as CSS variables by app.js. Defaults below are
   Tokyo Night so the page is right before the script runs. */
:root {
  --bg: #1a1b26;
  --bg-dark: #13141c;
  --bg-darker: #0e0e14;
  --bg-light: #24283b;
  --fg: #a9b1d6;
  --fg-dim: #565f89;
  --fg-light: #b4bee6;
  --fg-bright: #c0caf5;
  --accent: #7aa2f7;
  --selection: #292e42;
  --muted: #414868;
  --red: #f7768e;
  --yellow: #e0af68;
  --green: #9ece6a;
  --cyan: #449dab;
  --blue: #7aa2f7;
  --magenta: #ad8ee6;
  --font: "JetBrainsMono Nerd Font", "JetBrains Mono", "Cascadia Mono", "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.5 var(--font);
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); }
button, input { font: inherit; }

.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  height: 34px;
  background: var(--bg-dark);
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
}
.bar.top { border-bottom: 1px solid var(--bg-light); }
.bar.bottom { border-top: 1px solid var(--bg-light); gap: 18px; font-size: 12px; }
.bar.bottom b { color: var(--fg); font-weight: 500; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; letter-spacing: 0.02em; text-decoration: none; }
.brand .logo { height: 15px; width: auto; display: block; }
.login .logo { height: 56px; width: auto; margin: 0 auto 12px; display: block; }
.grow { flex: 1; }
.status { color: var(--yellow); }
.usage { color: var(--fg-dim); }
.crumbs { display: flex; gap: 0; min-width: 0; overflow: hidden; }
.crumbs a { color: var(--fg-light); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus { color: var(--fg-bright); outline: none; text-decoration: underline; }
.crumbs span { color: var(--muted); padding: 0 4px; }
.crumbs .here { color: var(--fg-bright); }
.chip {
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--bg-light);
  border-radius: 3px;
  padding: 1px 8px;
  cursor: pointer;
}
.chip:hover, .chip:focus-visible { color: var(--fg-bright); border-color: var(--muted); outline: none; }

main {
  flex: 1;
  position: relative;
  overflow: auto;
  padding: 10px 14px 20px;
}
.list { list-style: none; margin: 0; padding: 0; outline: none; max-width: 1100px; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 150px;
  gap: 16px;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-left: 2px solid transparent;
  cursor: default;
  color: var(--fg);
}
.row:hover { background: var(--bg-light); }
.row.selected { background: var(--selection); border-left-color: var(--accent); color: var(--fg-bright); }
.row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.folder .name { color: var(--accent); }
.row.folder .name::after { content: "/"; color: var(--fg-dim); }
.row .name .path { color: var(--fg-dim); }
.row .size, .row .date { color: var(--fg-dim); text-align: right; font-variant-numeric: tabular-nums; }
.row .size.warn { color: var(--yellow); }
.empty { color: var(--fg-dim); padding: 20px 12px; margin: 0; }
.drop {
  position: absolute;
  inset: 8px;
  border: 1px dashed var(--accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  display: grid;
  place-items: center;
  color: var(--accent);
  pointer-events: none;
}

.login {
  max-width: 420px;
  margin: 18vh auto 0;
  text-align: center;
}
.login h1 { color: var(--accent); font-size: 28px; font-weight: 600; margin: 0 0 6px; }
.login p { margin: 6px 0 18px; }
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 3px;
  font-weight: 600;
}
.button:hover { filter: brightness(1.1); }
.dim { color: var(--fg-dim); }

.dialog {
  background: var(--bg-dark);
  color: var(--fg);
  border: 1px solid var(--bg-light);
  border-radius: 4px;
  padding: 14px 16px;
  min-width: min(480px, 92vw);
  max-width: 92vw;
}
.dialog::backdrop { background: rgb(0 0 0 / 0.55); }
.dialog p { margin: 0 0 10px; }
.dialog input {
  width: 100%;
  background: var(--bg);
  color: var(--fg-bright);
  border: 1px solid var(--muted);
  border-radius: 3px;
  padding: 6px 8px;
}
.dialog input:focus { outline: none; border-color: var(--accent); }
.dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 0; padding: 0; }
.dialog button {
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--bg-light);
  border-radius: 3px;
  padding: 3px 12px;
  cursor: pointer;
}
.dialog button.primary { color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.dialog button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.dialog #dialog-extra { margin: 8px 0 0; word-break: break-all; }
.dialog #dialog-extra:empty { display: none; }
.help h2 { margin: 0 0 10px; color: var(--accent); font-size: 14px; font-weight: 600; }
.help table { border-collapse: collapse; width: 100%; }
.help td { padding: 2px 10px 2px 0; vertical-align: top; }
.help td:nth-child(odd) { color: var(--fg-bright); white-space: nowrap; }
.help td:nth-child(even) { color: var(--fg-dim); }
.help p { margin-top: 12px; font-size: 12px; }

.toast {
  position: fixed;
  right: 14px;
  bottom: 44px;
  max-width: min(520px, 90vw);
  background: var(--bg-light);
  color: var(--fg-bright);
  border-left: 2px solid var(--accent);
  padding: 6px 12px;
  border-radius: 3px;
  word-break: break-word;
}
.toast.error { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--green); }

@media (max-width: 640px) {
  .row { grid-template-columns: minmax(0, 1fr) 80px; }
  .row .date, .bar.bottom { display: none; }
}