/* MVM Edge — direction A, "Éjszakai felmérés" (mockups/index.html, .dir-a).
   Stock File Browser v2 under branding.files: this file is served as /static/custom.css and
   loads after the app stylesheet; the font, logo and photo are /static/img/* from the same
   origin (relative urls only, nothing leaves the origin). Every text this file adds is
   Hungarian; the login page is Hungarian whatever the browser language (see the login
   section), and the rest of the app follows the user's own locale (stock translations). */

@font-face {
  font-family: "Geologica";
  src: url(img/geologica.woff2) format("woff2");
  font-weight: 200 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- design tokens: the one block the viewer mirrors ----------
   Blue-black family (hue 235), amber signal, green "done". Contrast of every pair the design
   uses is checked by branding/tools/contrast.py (4.5:1 text, 3:1 large text and control edges). */
/* tokens:begin */
/* theme v2: mid slate, paper at L 38%, header darker than the page */
:root,
:root.dark,
:root.light {
  --paper: oklch(38% 0.015 235);
  --paper-2: oklch(41.5% 0.016 235);
  --paper-3: oklch(46% 0.017 235);
  --head-bg: oklch(29% 0.014 235);
  --ink: oklch(99% 0.003 230);
  --ink-2: oklch(95% 0.005 230);
  --muted: oklch(89% 0.009 230);
  --rule: oklch(48% 0.015 235);
  --rule-2: oklch(58% 0.016 235);
  --field-edge: oklch(72% 0.02 235);
  --signal: #f0b323;
  --signal-hi: #f5c451;
  --signal-ink: #2a1e00;
  --icon-fg: #f0b323;
  --ok: #a3e6b3;
  --link: #c3dbf3;
  --head-text: #e9eef2;
  --head-icon: #cfd6db;
  --head-hint: #b4bec5;
  --hover-tint: rgb(255 255 255 / 0.08);
  --logo-plate: transparent;
  --logo-pad: 0;
  --scheme: dark;
  --input-red: oklch(50% 0.1 25);
  --input-green: oklch(50% 0.1 150);
}
/* tokens:end */

:root,
:root.dark,
:root.light {
  --split: 53.5%;

  /* the app's own tokens, mapped onto the palette */
  --background: var(--paper);
  --surfacePrimary: var(--paper-2);
  --surfaceSecondary: var(--paper-3);
  --divider: var(--rule);
  --textPrimary: var(--muted);
  --textSecondary: var(--ink);
  --borderPrimary: var(--rule);
  --borderSecondary: var(--rule-2);
  --hover: var(--hover-tint);
  --action: var(--ink-2);
  --iconPrimary: var(--icon-fg);
  --iconSecondary: var(--signal-ink);
  --iconTertiary: var(--muted);
  --blue: var(--icon-fg);
  --dark-blue: var(--signal-hi);
  --item-selected: var(--signal);
  color-scheme: var(--scheme);
}

html,
body {
  background: var(--paper);
}

body {
  font-family: "Geologica", system-ui, sans-serif;
  font-weight: 300;
  color: var(--ink-2);
}

#loading {
  background: var(--paper);
}

/* ---------- login: photo left, card right ---------- */

#login {
  background: var(--paper);
}

#login::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--split);
  background: url(img/login-bg.jpg) center / cover no-repeat;
  filter: saturate(0.8) contrast(1.06);
}

#login::after {
  content: "Légi felmérés · 120 m · 0,8 cm/px";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--split);
  display: flex;
  align-items: flex-end;
  padding: 0 32px 30px;
  box-sizing: border-box;
  color: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
  background: linear-gradient(90deg, transparent 55%, var(--paper));
  pointer-events: none;
}

#login form {
  position: fixed;
  top: 50%;
  left: calc(var(--split) + (100% - var(--split)) / 2);
  width: min(380px, 38%);
  max-width: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#login img {
  display: block;
  box-sizing: content-box;
  width: auto;
  height: 30px;
  margin: 0 0 30px;
  padding: var(--logo-pad);
  border-radius: 4px;
  background: var(--logo-plate);
}

#login h1 {
  margin: 0 0 26px;
  text-align: left;
  font-size: 0;
  line-height: 0;
  font-weight: 300;
  color: var(--ink);
}

#login h1::before {
  content: "Felmérési adatok,\A egy helyen.";
  white-space: pre;
  display: block;
  margin-bottom: 8px;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variation-settings: "SHRP" 100;
}

#login h1::after {
  content: "Képek és pontfelhők az MVM hálózati társaságainak.";
  display: block;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--muted);
}

#login form::after {
  content: "Kérdés esetén: Talamone Group";
  display: block;
  margin-top: 26px;
  font-size: 12px;
  color: var(--muted);
}

#login .input {
  box-sizing: border-box;
  height: 46px;
  margin-bottom: 14px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--field-edge);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

/* The login page is always Hungarian, whatever the browser language. The stock placeholders and
   the button text are attributes in the browser's language, which CSS cannot rewrite, so they are
   made transparent and an image of the Hungarian word (img/login-*.svg, outlined Geologica, made
   by branding/tools/make-login-labels.py) sits behind them: the placeholders only while the field
   is empty, the button label always. */
#login .input::placeholder {
  color: transparent;
}

#login .input:placeholder-shown {
  background-repeat: no-repeat;
  background-position: 14px center;
}

#login input[type="text"]:placeholder-shown {
  background-image: url(img/login-user.svg);
}

#login input[type="password"]:placeholder-shown {
  background-image: url(img/login-pass.svg);
}

#login .input:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--signal), 0 0 0 3px color-mix(in oklab, var(--signal) 22%, transparent);
}

#login .button {
  height: 48px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--signal) url(img/login-submit.svg) center / auto no-repeat;
  box-shadow: none;
  color: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
}

#login .button:hover {
  background-color: var(--signal-hi);
}

@media (max-width: 900px) {
  #login::before,
  #login::after {
    display: none;
  }

  #login form {
    left: 50%;
    width: min(380px, 86%);
  }
}

/* ---------- header ---------- */

header {
  background: var(--head-bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}

header img {
  order: -1;
  height: 26px;
  margin-right: 14px;
}

@media (min-width: 737px) {
  header:has(> img)::before {
    content: "Edge";
    order: 0;
    margin-right: 8px;
    color: var(--head-text);
    font-size: 15px;
    font-weight: 300;
    letter-spacing: -0.01em;
    font-variation-settings: "SHRP" 100;
  }
}

header .action {
  color: var(--head-icon);
}

header .action i {
  border-radius: 999px;
}

header #upload-button i {
  background: var(--signal);
  color: var(--signal-ink);
}

header #upload-button:hover i {
  background: var(--signal-hi);
}

/* the search box gives way first: the stock header (a small icon, a fixed 400px search) fits at
   737 px, the wide lockup plus a fixed search does not, and the actions at the right edge were
   cut off between 737 and 1023 px. It keeps up to 400px and shrinks from there. */
#search {
  flex: 0 1 400px;
  width: auto;
  min-width: 0;
  margin-left: 24px;
}

#search #input input {
  min-width: 0;
}

#search #input {
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.065);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.11);
  padding: 0 16px;
}

#search #input input,
#search #input i {
  color: var(--head-hint);
}

#search #input input::placeholder {
  color: var(--head-hint);
}

/* ---------- sidebar ---------- */

nav {
  background: var(--paper);
  border-right: 1px solid var(--rule);
  box-shadow: none;
  padding: 18px 12px;
  box-sizing: border-box;
}

nav .action {
  box-sizing: border-box;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-2);
}

nav .action:hover {
  background: var(--paper-3);
  color: var(--ink);
}

nav .action i {
  margin-right: 12px;
  padding: 0;
  font-size: 20px;
  color: var(--muted);
}

nav > div {
  border-top: 1px solid var(--rule);
  margin: 10px 4px;
  padding-top: 10px;
}

/* the app sets width:90% and margin:2em 2.5em 3em inline on this block; its margin box is what
   made the sidebar scroll sideways, so the inline values are overridden at the cause */
nav div.credits {
  width: auto !important;
  margin: 0 !important;
  padding: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

nav div.credits .vue-simple-progress {
  height: 4px !important;
  border-radius: 2px;
  background: var(--rule) !important;
  overflow: hidden;
}

nav div.credits .vue-simple-progress-bar {
  background: var(--ok) !important;
}

/* the version line and the help link are File Browser's own credits */
nav p.credits {
  display: none;
}

/* ---------- main area ---------- */

main {
  color: var(--ink-2);
}

.breadcrumbs {
  background: var(--paper);
  border-bottom: 0;
  font-size: 14px;
}

.breadcrumbs a:hover {
  background: var(--paper-3);
}

#listing h2 {
  margin: 6px 0 10px 0;
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
}

#listing .item {
  background: var(--paper-2);
  border-color: var(--rule);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

#listing .item .name,
#listing.list .name {
  color: var(--ink);
  font-weight: 300;
}

#listing .item .size,
#listing .item .modified {
  color: var(--muted);
}

#listing .item i {
  color: var(--icon-fg);
}

#listing .item:hover {
  background: var(--paper-3);
}

#listing .item[aria-selected="true"] {
  background: color-mix(in oklab, var(--signal) 14%, var(--paper-2)) !important;
  box-shadow: inset 0 0 0 1px var(--signal);
  color: var(--ink) !important;
}

#listing .item[aria-selected="true"] .size,
#listing .item[aria-selected="true"] .modified {
  color: var(--ink-2) !important;
}

/* list view */
#listing.list .item {
  border-radius: 0;
  border-left-color: var(--rule);
  border-right-color: var(--rule);
}

#listing.list .item.header {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 12px;
}

#listing.list .item.header .active {
  color: var(--ink);
  font-weight: 400;
}

/* file icons: folders keep the signal colour, files stay neutral */
#listing .item i {
  color: var(--ink-2);
}

#listing .item[data-dir="true"] i {
  color: var(--icon-fg);
}

#listing .item[aria-selected="true"] i {
  color: var(--ink);
}

/* point-cloud and scan files get the badge of the mockup instead of the generic glyph */
#listing .item[data-ext=".laz"] i,
#listing .item[data-ext=".las"] i,
#listing .item[data-ext=".e57"] i,
#listing .item[data-ext=".ply"] i {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: 0 12px 0 0;
  border-radius: 6px;
  background: var(--paper-3);
  font-family: "Geologica", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  vertical-align: middle;
}

#listing .item[data-ext=".laz"] i::before { content: "LAZ"; }
#listing .item[data-ext=".las"] i::before { content: "LAS"; }
#listing .item[data-ext=".e57"] i::before { content: "E57"; }
#listing .item[data-ext=".ply"] i::before { content: "PLY"; }
#listing .item[data-ext=".laz"] i { color: var(--link); }
#listing .item[data-ext=".e57"] i { color: var(--ok); }

/* badge: win over the list view's `i { font-size: 2em }` */
#listing .item[data-ext=".laz"] i,
#listing .item[data-ext=".las"] i,
#listing .item[data-ext=".e57"] i,
#listing .item[data-ext=".ply"] i {
  font-size: 9.5px !important;
}

/* ---------- gallery (the "mosaic gallery" view): tiles with the caption below ---------- */

#listing.mosaic.gallery > div[data-clear-on-click] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

#listing.mosaic.gallery > div[data-clear-on-click]:has(> .item[data-dir="true"]) {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

#listing.mosaic.gallery .item {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: none;
}

#listing.mosaic.gallery .item div:first-of-type {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

#listing.mosaic.gallery .item img {
  width: 100%;
  height: 100%;
  filter: saturate(0.8) contrast(1.06);
}

#listing.mosaic.gallery .item[data-dir] div:last-of-type {
  position: static;
  width: auto;
  padding: 8px 10px 10px;
  color: var(--ink);
  text-align: left;
  background: none;
}

#listing.mosaic.gallery .item .name {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#listing.mosaic.gallery .item .size {
  display: block;
  font-size: 11.5px;
}

#listing.mosaic.gallery .item[aria-selected="true"] {
  box-shadow: 0 0 0 2px var(--signal);
}

/* folders: compact cards with the corner-tick frame of the mockup */
#listing.mosaic.gallery .item[data-dir="true"] {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  overflow: visible;
}

#listing.mosaic.gallery .item[data-dir="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  -webkit-mask: conic-gradient(at 10px 10px, transparent 75%, #000 0) 0 0 / calc(100% - 10px) calc(100% - 10px);
  mask: conic-gradient(at 10px 10px, transparent 75%, #000 0) 0 0 / calc(100% - 10px) calc(100% - 10px);
}

#listing.mosaic.gallery .item[data-dir="true"] div:first-of-type {
  width: auto;
  height: auto;
  aspect-ratio: auto;
}

#listing.mosaic.gallery .item[data-dir="true"] div:last-of-type {
  padding: 0;
}

#listing.mosaic.gallery .item[data-dir="true"] .size,
#listing.mosaic.gallery .item[data-dir="true"] .modified {
  display: none;
}

#listing.mosaic.gallery .item[data-dir="true"] i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 6px;
  background: color-mix(in oklab, var(--signal) 18%, transparent);
  font-size: 20px;
}

#listing.mosaic.gallery .item[data-dir="true"] .name {
  font-size: 15px;
  white-space: normal;
}

/* ---------- upload panel ---------- */

.upload-files .card.floating {
  right: 22px;
  bottom: 22px;
  width: 380px;
  max-width: calc(100% - 44px);
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--rule-2), 0 20px 40px -20px rgb(0 0 0 / 0.55);
}

.upload-files .file .file-progress {
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}

.upload-files .file .file-progress div {
  background: var(--signal);
  border-radius: 0;
}

.upload-files .card .card-title {
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 0;
  font-size: 14px;
}

.upload-files .card .card-title h2 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.upload-files .upload-info {
  min-width: max-content;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.upload-files .card .card-content {
  padding: 10px 16px 14px;
}

.upload-files .file .file-name {
  color: var(--ink-2);
  font-size: 12.5px;
}