/* CPFL Store — the layout of mvmedge's direction A, in the CPFL Transmissão palette.
   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
   English; the login page is English whatever the browser language (see the login
   section), and the rest of the app follows the user's own locale (stock translations:
   English by default, Portuguese (pt-br) offered). */

@font-face {
  font-family: "Inter Tight";
  src: url(img/intertight.woff2) format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- design tokens: the one block the viewer mirrors ----------
   Deep navy-teal family, cyan signal, mint "done" (the CPFL vendor app tokens). 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 cpfl: deep navy-teal page (the CPFL vendor app's --bg #17262f), cyan signal (--cy #38bdf8), mint done (--gn #3ddc84) */
:root,
:root.dark,
:root.light {
  --paper: #17262f;
  --paper-2: #1c2e38;
  --paper-3: #233843;
  --head-bg: #0f1b22;
  --ink: #f3f7f9;
  --ink-2: #e1e9ed;
  --muted: #a8bac4;
  --rule: #2a404c;
  --rule-2: #3b5562;
  --field-edge: #6b8593;
  --signal: #38bdf8;
  --signal-hi: #7dd3fc;
  --signal-ink: #03202e;
  --icon-fg: #38bdf8;
  --ok: #3ddc84;
  --link: #c2e4f7;
  --head-text: #e6eef2;
  --head-icon: #c3d1d8;
  --head-hint: #9fb2bc;
  --hover-tint: rgb(255 255 255 / 0.06);
  --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: "Inter Tight", 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 {
  /* the photo: img/login-bg.jpg, Sentinel-2 true colour, the Copernicus attribution it needs
     (branding/SOURCES.md) */
  content: "Jacuí delta and Porto Alegre, RS · Sentinel-2 · 2024-10-05\A Contains modified Copernicus Sentinel data 2024";
  white-space: pre-line;
  line-height: 1.6;
  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: 34px;
  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: "Survey data,\A in one place.";
  white-space: pre;
  display: block;
  margin-bottom: 8px;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

#login h1::after {
  content: "Images and point clouds for CPFL Transmissão.";
  display: block;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--muted);
}

#login form::after {
  content: "Questions: 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 English, 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 English word (img/login-*.svg, outlined Inter Tight, 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: 30px;
  margin-right: 14px;
}

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

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: "Inter Tight", 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;
}