/* =========================================================
   Zentorp — File Browser branding
   White #FFFFFF · Black #000000
   ========================================================= */

:root {
  --pv-bg: #000000;
  --pv-panel: #0a0a0a;
  --pv-panel-2: #111111;
  --pv-hover: #1a1a1a;
  --pv-border: #2a2a2a;
  --pv-cyan: #ffffff;
  --pv-cyan-dim: #d8d8d8;
  --pv-cyan-deep: #8a8a8a;
  --pv-lime: #ffffff;
  --pv-lime-bright: #ffffff;
  --pv-text: #f5f5f5;
  --pv-muted: #9a9a9a;
  --pv-danger: #ff4d6a;
}

* {
  scrollbar-color: var(--pv-cyan-deep) #000;
}

body,
#loading,
#login,
header,
.card,
#search .boxes,
#search.active #input {
  background-color: var(--pv-bg) !important;
  color: var(--pv-text) !important;
}

body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 255, 255, 0.08), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(255, 255, 255, 0.04), transparent 50%) !important;
  background-attachment: fixed !important;
}

/* Spinner */
.spinner > div {
  background-color: var(--pv-cyan) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

/* Text / icons */
.action,
#listing h2,
#search .boxes h3,
.card h3,
.collapsible > label *,
.dashboard p label,
.message {
  color: var(--pv-text) !important;
}

a {
  color: var(--pv-cyan) !important;
}

a:hover {
  color: var(--pv-lime) !important;
}

/* Login */
#login {
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
    #000 !important;
}

/* Zentorp logo — inject PNG via ::before (reliable) */
#login form::before {
  content: "";
  display: block;
  width: 280px;
  height: 280px;
  max-width: 80vw;
  margin: 0 auto 1.5rem;
  background: url("/static/img/logo.png") center / contain no-repeat;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.28));
}

/* Hide the tiny default 4em <img> */
#login form > img,
#login img,
.login img {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

header img,
nav img {
  height: 2.75em !important;
  width: 2.75em !important;
  max-height: 2.75em !important;
  object-fit: contain !important;
  display: inline-block !important;
  background: url("/static/img/logo.png") center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
}

@media (max-width: 736px) {
  header img {
    display: inline-block !important;
    height: 2.2em !important;
    width: 2.2em !important;
  }
}

#login h1,
#login form > div:first-child,
.card > h1 {
  color: #ffffff !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}

/* Header bar */
header {
  background: rgba(0, 0, 0, 0.92) !important;
  border-bottom: 1px solid var(--pv-border) !important;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
}

header .action,
header .action i,
header .action span {
  color: var(--pv-cyan) !important;
}

header .action:hover,
header .action:hover i {
  color: var(--pv-lime) !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

header img {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
}

/* Cards / panels */
.card {
  background: var(--pv-panel) !important;
  border: 1px solid var(--pv-border) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.65) !important;
}

/* Inputs */
#search #input,
#search #result,
.input,
input,
textarea,
select,
#listing.list .item.header {
  background-color: var(--pv-panel-2) !important;
  color: var(--pv-text) !important;
  border-color: var(--pv-border) !important;
}

#search.active i,
#search.active input,
table th {
  color: var(--pv-text) !important;
}

input:focus,
textarea:focus,
select:focus,
.input:focus {
  border-color: var(--pv-cyan) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 16px rgba(255, 255, 255, 0.12) !important;
  outline: none !important;
}

/* Listing */
#listing .item,
.shell,
.share__box {
  background-color: var(--pv-panel) !important;
  color: var(--pv-text) !important;
  border-color: var(--pv-border) !important;
}

#listing .item:hover,
.file-list li:hover {
  background-color: var(--pv-hover) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

#listing .item[aria-selected="true"],
#listing .item.selected {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 0 0 1px var(--pv-cyan) !important;
}

/* Buttons */
.button,
button,
input[type="submit"] {
  border-radius: 4px !important;
}

.button--blue,
button.button--blue,
#login input[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg, var(--pv-cyan-deep), var(--pv-cyan)) !important;
  color: #000 !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.28) !important;
}

.button--blue:hover,
button.button--blue:hover,
#login input[type="submit"]:hover,
input[type="submit"]:hover {
  background: #ffffff !important;
  color: #000 !important;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.4) !important;
}

/* Sidebar / nav links */
nav .action,
.sidebar .action {
  color: var(--pv-muted) !important;
}

nav .action:hover,
.sidebar .action:hover,
nav .action.active {
  color: var(--pv-cyan) !important;
  background: var(--pv-hover) !important;
}

/* Progress */
.progress div,
.share__box__download {
  background: linear-gradient(90deg, var(--pv-cyan-deep), var(--pv-lime)) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

/* Dropdowns / context */
#contextmenu,
.dropdown,
.popup {
  background: #050807 !important;
  border: 1px solid var(--pv-border) !important;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.08) !important;
  color: var(--pv-text) !important;
}

#contextmenu > div:hover,
.dropdown a:hover {
  background: var(--pv-hover) !important;
  color: var(--pv-lime) !important;
}

/* Ace editor gutter when used */
.ace-chrome,
.ace-chrome .ace_gutter,
.ace-chrome .ace_gutter-active-line {
  background-color: #050807 !important;
  color: var(--pv-text) !important;
}

/* Scrollbars */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: #000;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--pv-cyan-deep), var(--pv-lime));
  border-radius: 4px;
}

/* Soften version / external credit look */
.credits,
footer {
  color: var(--pv-muted) !important;
  opacity: 0.5;
}