/* =============================================================================
   FILES-10SERVER — "Index of /" reskin for copyparty
   -----------------------------------------------------------------------------
   Turns copyparty into a bare, dark, monospace directory-index aesthetic.
   Strategy: copyparty is fully CSS-variable driven, with themes as html.<x>
   classes that redefine :root vars. We override the whole variable set with
   !important (beats any active theme class, upgrade-safe) + a small set of
   structural flattenings for the file table, toolbar, tree, markdown, modals,
   and the (hardcoded-color) splash/control-panel page.
   Loaded last via html-head, so it also wins on source order.
   Engine (up2k, WebDAV, thumbs, bpm/key, auth) is untouched. v3 pairs with
   theme.js v2 (text toolbar, line-svg icons, emoji sweep); the seek/volume
   bars are copyparty's native canvases, desaturated below.
   ============================================================================= */

/* ------------------------------------------------------------------ palette */
:root, html {
  /* fonts — JetBrains Mono everywhere (customfonts.css supplies the @font-face) */
  --font-main:'JetBrainsMono Nerd Font','JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace !important;
  --font-serif:var(--font-main) !important;
  --font-mono:var(--font-main) !important;

  /* foreground */
  --fg:#cfcfcf !important;
  --fg-max:#e9e9e9 !important;
  --fg2-max:#e9e9e9 !important;
  --fg-weak:#8a8a8a !important;

  /* background stack (dark, low-contrast steps) */
  --bg:#161616 !important;   --bgg:#161616 !important;
  --bg-u1:#1a1a1a !important; --bg-u2:#1c1c1c !important; --bg-u3:#202020 !important;
  --bg-u4:#242424 !important; --bg-u5:#2a2a2a !important; --bg-u6:#303030 !important;
  --bg-d1:#131313 !important; --bg-d2:#101010 !important; --bg-d3:#0d0d0d !important;
  --bg-max:#000 !important;
  --row-alt:#191919 !important;   /* near-invisible zebra */
  --tree-bg:#161616 !important;
  --scroll:#3a3a3a !important;

  /* links / accents — the key move: amber (#fc5) -> autoindex blue */
  --a:#7ea6d6 !important;   --a-b:#7ea6d6 !important;   --a-hil:#a9c8ea !important;
  --a-dark:#9a7ab5 !important;   /* audio-play links read as "visited" purple */
  --a-gray:#8a8a8a !important;   --a-h-bg:transparent !important;
  --tab-alt:#9a7ab5 !important;
  --sel-fg:#000 !important;  --sel-bg:#7ea6d6 !important;
  --sort-1:#7ea6d6 !important; --sort-2:#9a7ab5 !important;

  /* file-size unit colors -> flat dim (bigger units get a faint blue) */
  --sz-b:#8a8a8a !important; --sz-k:#8a8a8a !important; --sz-m:#8a8a8a !important;
  --sz-g:#a9c8ea !important; --sz-t:#a9c8ea !important; --sz-p:#a9c8ea !important;

  /* server / account info line */
  --srv-1:#8a8a8a !important; --srv-2:#8a8a8a !important;
  --srv-3:#b85450 !important; --srv-3b:rgba(184,84,80,.5) !important;

  /* buttons — flat, no bevels/shadows */
  --btn-fg:#7ea6d6 !important;   --btn-bg:transparent !important;
  --btn-h-fg:#a9c8ea !important; --btn-h-bg:#1c1c1c !important;
  --btn-1-fg:#e9e9e9 !important; --btn-1-bg:#242424 !important;
  --btn-1h-fg:#ffffff !important; --btn-1h-bg:#2f2f2f !important;
  --btn-bs:none !important;  --btn-bb:0 !important;
  --btn-h-bs:none !important; --btn-h-bb:0 !important;
  --btn-1-bs:none !important; --btn-1-bb:0 !important;
  --btn-1h-bs:none !important; --btn-1h-bb:0 !important;
  --chk-fg:#7ea6d6 !important;
  --txt-sh:transparent !important; --txt-bg:#0d0d0d !important;

  /* operations bar (toolbar) */
  --op-aa-fg:#a9c8ea !important; --op-aa-bg:#1c1c1c !important;
  --op-aa-sh:none !important; --op-a-sh:transparent !important;

  /* up2k uploader */
  --u2-btn-b1:#333 !important; --u2-sbtn-b1:#5a8cc7 !important; --u2-txt-bg:#0d0d0d !important;
  --u2-tab-bg:#161616 !important; --u2-tab-b1:#333 !important;
  --u2-tab-1-fg:#e9e9e9 !important; --u2-tab-1-bg:#1c1c1c !important;
  --u2-tab-1-b1:#5a8cc7 !important; --u2-tab-1-b2:#5a8cc7 !important; --u2-tab-1-sh:transparent !important;
  --u2-b-fg:#e9e9e9 !important; --u2-b1-bg:#5a8cc7 !important; --u2-b2-bg:#7ea6d6 !important;
  --u2-inf-bg:#24435e !important; --u2-inf-b1:#5a8cc7 !important;
  --u2-ok-bg:#26402f !important;  --u2-ok-b1:#6b9b7a !important;
  --u2-err-bg:#3f1f1e !important; --u2-err-b1:#b85450 !important;
  --ud-b1:#333 !important;

  /* grid / thumbnail view */
  --g-play-bg:#24435e !important; --g-play-b1:#5a8cc7 !important; --g-play-b2:#7ea6d6 !important; --g-play-sh:#24435e !important;
  --g-sel-fg:#e9e9e9 !important; --g-sel-bg:#2a2a2a !important; --g-sel-b1:#5a8cc7 !important; --g-sel-sh:#111 !important;
  --g-fsel-bg:#30506e !important; --g-fsel-b1:#7ea6d6 !important; --g-fsel-ts:#000 !important;
  --g-dfg:#9a7ab5 !important; --g-fg:#a9c8ea !important;
  --g-bg:#161616 !important; --g-b1:#333 !important; --g-b2:#333 !important;
  --g-g1:#161616 !important; --g-g2:#1c1c1c !important;
  --g-f-bg:#1c1c1c !important; --g-f-b1:#333 !important; --g-f-fg:#a9c8ea !important;
  --g-sh:rgba(0,0,0,.3) !important;

  /* files / media player */
  --f-h-b1:#333 !important;
  --f-play-bg:#7ea6d6 !important; --f-play-fg:#000 !important;
  --f-sel-sh:#5a8cc7 !important; --f-gray:#8a8a8a !important; --fm-off:#9a7ab5 !important;
  --mp-sh:#0d0d0d !important; --mp-b-bg:#1c1c1c !important;

  /* errors */
  --err-fg:#fff !important; --err-bg:#b85450 !important; --err-b1:#d06 !important; --err-ts:#500 !important;
}

/* --------------------------------------------------- global flat treatment */
html, body { background:#161616 !important; }
html, body, #files td, #files th, #path, #ops a, #tree, #wrap, .logue, .mdo, .mdo * { text-shadow:none !important; }
* { border-radius:0 !important; }   /* redundant with customfonts, kept standalone */

a { color:#7ea6d6 !important; text-decoration:underline !important; text-underline-offset:2px; }
a:hover { color:#a9c8ea !important; }

/* focus: kill amber glow, use a quiet ring */
*:focus, .btn:focus, #ops *:focus { box-shadow:none !important; outline:1px solid #5f5f5f !important; }
input[type="text"]:focus, input:not([type]):focus, textarea:focus { box-shadow:0 0 0 1px #5f5f5f !important; }

/* ---------------------------------------------------- file listing = index */
#files td, #files thead th { background:transparent !important; border:none !important; }
#files thead th { color:#5c5c5c !important; font-weight:400 !important; border-bottom:1px solid #333 !important; }
#files tbody tr:hover td, #files tbody tr:hover td+td { background:#1c1c1c !important; box-shadow:none !important; }
#files tr:nth-child(2n) td { background:#191919 !important; }
#files a { color:#7ea6d6 !important; text-decoration:underline !important; }
#files a:hover { color:#a9c8ea !important; background:transparent !important; }
#files a.play { color:#9a7ab5 !important; }
#files a.doc { color:#8a8a8a !important; }
#files tr.sel td, #files tr.sel td+td { background:#202a35 !important; }
#files tr:focus td+td,
#files tr:focus:not(.play):not(.sel) td:first-child { box-shadow:none !important; background:#202020 !important; }

/* breadcrumb path */
#path { font-size:1.2em !important; }
#path a:hover { background:transparent !important; color:#a9c8ea !important; text-decoration:underline !important; }

/* README shown under listing */
#epi.logue.mdo { border-top:1px solid #333 !important; }
#epi.logue.mdo:before { color:#5c5c5c !important; }

/* --------------------------------------------------------- toolbar (#ops) */
#ops { border-bottom:1px solid #333 !important; }
#ops a { background:transparent !important; box-shadow:none !important; border:none !important; text-decoration:none !important; }
#ops a.act { background:transparent !important; color:#a9c8ea !important; border-bottom:2px solid #7ea6d6 !important; box-shadow:none !important; }
.opview select, .opview input[type=text] { background:#0d0d0d !important; border:1px solid #333 !important; color:#e9e9e9 !important; box-shadow:none !important; }
.tgl.btn.on { background:#242424 !important; color:#e9e9e9 !important; box-shadow:none !important; border-bottom:0 !important; }

/* ------------------------------------------------------------ tree sidebar */
#tree { box-shadow:none !important; }
#tree, #treepar, #treeh { background:#161616 !important; border-color:#333 !important; }
#tree ul { border-left:1px solid #333 !important; }
#tree li { border-top:none !important; }
#tree a { color:#7ea6d6 !important; text-decoration:none !important; }
#tree a:hover, #docul a:hover, #tree .ntree a+a:hover { background:#1c1c1c !important; color:#a9c8ea !important; }
#tree ul a.sel { background:#202020 !important; box-shadow:-.6em 0 0 #5a8cc7 inset !important; color:#e9e9e9 !important; }

/* -------------------------------------------------------- markdown output */
.mdo h1, .mdo h2, .mdo h3 { background:transparent !important; border:none !important; color:#e9e9e9 !important; font-weight:400 !important; text-align:left !important; margin:1em 0 .3em !important; padding:0 !important; }
.mdo h1 { border-bottom:1px solid #333 !important; padding-bottom:.2em !important; }
.mdo h2 { border-bottom:1px solid #262626 !important; }
.mdo a, html.z .mdo a { color:#7ea6d6 !important; background:transparent !important; border:none !important; padding:0 !important; text-decoration:underline !important; }
.mdo pre, .mdo code, html.z .mdo pre, html.z .mdo code { color:#cfcfcf !important; background:#1a1a1a !important; border:1px solid #333 !important; }
.mdo pre code:hover { background:#1a1a1a !important; color:#cfcfcf !important; }
.mdo blockquote, html.z .mdo blockquote { background:#1a1a1a !important; border:1px solid #333 !important; border-left:2px solid #5a8cc7 !important; }
.mdo strong, html.z .mdo strong { color:#e9e9e9 !important; }
.mdo p>em, .mdo li>em, .mdo td>em, html.z .mdo p>em { color:#c9a86a !important; border:none !important; }
.mdo th, .mdo td, html.z .mdo th, html.z .mdo td { border-color:#333 !important; }

/* ---------------------------------------------------------- modal dialogs */
#modal { background:rgba(5,5,5,.62) !important; }
#modalc { background:#161616 !important; color:#cfcfcf !important; border:1px solid #4a4a4a !important; box-shadow:0 18px 50px rgba(0,0,0,.7) !important; }
#modalc a { color:#7ea6d6 !important; }
#modalc h6 { border-bottom:1px solid #333 !important; }
#modalc code { color:#a9c8ea !important; background:#1a1a1a !important; border:1px solid #333 !important; }
#modalb a { background:#242424 !important; color:#7ea6d6 !important; }
#modalb a:focus, #modalb a:hover { background:#2f2f2f !important; color:#fff !important; }
#modali { background:#0d0d0d !important; color:#e9e9e9 !important; border:1px solid #333 !important; }
#modali:focus { border-color:#5f5f5f !important; }

/* rename / share panels */
#rui input[readonly] { background:#0d0d0d !important; border:1px solid #333 !important; }

/* toasts / notifications -> muted semantic */
#toast.inf  { background:#24435e !important; border-color:#5a8cc7 !important; }
#toast.ok   { background:#26402f !important; border-color:#6b9b7a !important; }
#toast.warn { background:#3a2f1a !important; border-color:#c9a86a !important; }
#toast.err  { background:#3f1f1e !important; border-color:#b85450 !important; }

/* =========================================================================
   SPLASH / CONTROL PANEL  (splash.css hardcodes per-theme colors — override
   base + html.z / html.bz directly, force dark regardless of active theme)
   ========================================================================= */
html.z, html.bz, html.y { background:#161616 !important; color:#cfcfcf !important; }
#wrap { max-width:54em !important; }
h1, #wrap h1, html.z h1 { border-bottom:1px solid #333 !important; font-weight:400 !important; color:#e9e9e9 !important; }

/* splash links: strip the pill/button chrome -> plain underlined links */
#wrap a, #wrap #lo, html.z a, html.z #lo,
.btns a, .agr a, .vols a {
  background:transparent !important; border:none !important; border-bottom:none !important;
  padding:0 !important; margin:0 .5em 0 0 !important; white-space:normal !important;
  box-shadow:none !important; text-decoration:underline !important; color:#7ea6d6 !important;
}
#lo, .logout, a.r, html.z .logout, html.z #lo, html.z a.r { color:#b85450 !important; }
a.g, html.z a.g { color:#6b9b7a !important; }

/* splash inputs */
#x, input, html.z input { background:#0d0d0d !important; color:#e9e9e9 !important; border:1px solid #333 !important; }
input::placeholder, html.z input::placeholder { color:#5c5c5c !important; font-style:italic; }

/* splash preformatted / connect commands */
pre, code, html.z pre, html.z code { color:#cfcfcf !important; background:#1a1a1a !important; border:1px solid #333 !important; }
pre b, code b, html.z pre b, html.z code b { color:#a9c8ea !important; border:none !important; text-shadow:none !important; }

/* volume table */
.vols td, .vols th { border-color:#333 !important; }
.num, html.z .num { border-color:#333 !important; }
blockquote { border-left:2px solid #5a8cc7 !important; }

/* =========================================================================
   v3 — DOM-half support (theme.js v2): text toolbar, line-svg icons, native
   canvas player desaturated, up2k flattening. nerd-icons.js + nerdfonts CDN
   are gone; theme.js supersedes them.
   ========================================================================= */

/* minimal line-svg icons: one fixed size everywhere, no em drift */
svg.ti { width:15px !important; height:15px !important; display:inline-block; vertical-align:-2px; }

/* ---- ops toolbar: bracketed text links, mockup-style ---- */
#ops { border-bottom:1px solid #333 !important; padding:.45em .4em !important; }
#ops a { color:#7ea6d6 !important; padding:.25em .2em !important; margin:0 .1em !important; font-size:1em !important; }
#ops a::before { content:"[ "; color:#4a4a4a; }
#ops a::after  { content:" ]"; color:#4a4a4a; }
#ops a:hover { color:#a9c8ea !important; background:transparent !important; }
#ops a.act { color:#e9e9e9 !important; border-bottom:none !important; }
#ops a.act::before, #ops a.act::after { color:#7ea6d6; }

/* icon-only toggles: hide the glyph (not the box) until the svg lands */
#entree, #detree { color:transparent !important; }
#wtoggle #wtico, #wtoggle #wtgrid, #wtoggle #visdir { color:transparent !important; }
#pctl a { color:transparent !important; text-decoration:none !important; background:transparent !important; box-shadow:none !important; }
#entree svg.ti, #detree svg.ti, #wtico svg.ti, #wtgrid svg.ti, #visdir svg.ti, #pctl a svg.ti { stroke:#7ea6d6; }
#entree:hover svg.ti, #detree:hover svg.ti, #wtico:hover svg.ti, #wtgrid:hover svg.ti, #visdir:hover svg.ti, #pctl a:hover svg.ti { stroke:#a9c8ea; }
#wtoggle a.on svg.ti { stroke:#e9e9e9; }
#entree { margin-right:.35em; }

/* ---- widget strip: native ergonomic player, index-of colors ---- */
#widget, #widget.open { background:#131313 !important; border-top:1px solid #2a2a2a !important; box-shadow:none !important; }
#wtoggle, #widgeti { background:#131313 !important; text-shadow:none !important; }
#wtoggle a { color:#7ea6d6 !important; text-decoration:none !important; background:transparent !important; box-shadow:none !important; }
#wtoggle a:hover { color:#a9c8ea !important; }
#wfm a::before { content:"[ "; color:#4a4a4a; }
#wfm a::after  { content:" ]"; color:#4a4a4a; }
#wfm a span { color:inherit; font-size:1em; }
/* seekbar + volume: copyparty's canvases (drag/scrub/buffer/waveform all
   native) — colors are hardcoded amber/green in JS, so desaturate here */
#barpos, #barbuf, #pvol { filter:grayscale(1) brightness(1.2); }
#barpos { box-shadow:none !important; }
#pvol { background:#0d0d0d !important; }

/* ---- up2k upload pane ---- */
#u2conf { width:auto !important; max-width:100% !important; }
#u2conf .c label {
  font-size:1em !important; width:auto !important; height:auto !important;
  min-width:2.2em; padding:.45em .55em !important; line-height:1 !important;
  text-shadow:none !important; box-shadow:none !important;
  background:transparent !important; border:1px solid #2e2e2e !important;
  color:#7ea6d6 !important;
}
#u2conf input[type="checkbox"]+label:hover { background:#1c1c1c !important; color:#a9c8ea !important; }
#u2conf input[type="checkbox"]:checked+label { background:#20303f !important; border-color:#5a8cc7 !important; color:#a9c8ea !important; }
#u2conf a.b { background:#242424 !important; color:#e9e9e9 !important; border:1px solid #333 !important; box-shadow:none !important; }
#u2conf a.b:hover { background:#2f2f2f !important; }
#u2conf .txtbox { background:#0d0d0d !important; color:#e9e9e9 !important; border:1px solid #333 !important; }
#op_up2k.srch #u2conf td:nth-child(2)>*, #op_up2k.srch #u2conf td:nth-child(3)>* { background:transparent !important; border-color:#333 !important; }
#u2btn { border:1px dashed #3a3a3a !important; background:transparent !important; color:#8a8a8a !important; text-shadow:none !important; }
#u2btn:hover { border-color:#5a8cc7 !important; color:#a9c8ea !important; }
#u2cards a { background:transparent !important; border:none !important; box-shadow:none !important; color:#7ea6d6 !important; padding:.25em .7em !important; margin:0 !important; }
#u2cards a::before { content:"[ "; color:#4a4a4a; }
#u2cards a::after  { content:" ]"; color:#4a4a4a; }
#u2cards a.act { color:#e9e9e9 !important; }
#u2cards a.act::before, #u2cards a.act::after { color:#7ea6d6; }
#u2cards span { color:#8a8a8a !important; font-style:normal !important; }
#u2etas { background:transparent !important; border:none !important; color:#8a8a8a !important; }
#u2etaw, #u2life, #u2foot { color:#8a8a8a !important; }
#u2foot { font-style:normal !important; font-size:1em !important; }
#u2tab td { border-color:#1f1f1f !important; }
#u2tab thead td { color:#5c5c5c !important; border-bottom:1px solid #333 !important; }
#u2tab span.inf, #u2tab span.ok, #u2tab span.err { color:#e9e9e9 !important; border-width:1px !important; padding:.05em .35em !important; }

/* ---- buttons: flat hairline boxes (doc bar, grid head, dialogs) ---- */
a.btn, .btn { background:transparent !important; box-shadow:none !important; border:1px solid #2e2e2e !important; color:#7ea6d6 !important; text-shadow:none !important; }
a.btn:hover, .btn:hover { background:#1c1c1c !important; color:#a9c8ea !important; }
.btn.tgl.on, .tgl.btn.on { background:#20303f !important; color:#a9c8ea !important; border-color:#5a8cc7 !important; box-shadow:none !important; }
button, input[type="submit"], input[type="button"] { background:#242424 !important; color:#e9e9e9 !important; border:1px solid #333 !important; box-shadow:none !important; text-shadow:none !important; font-family:var(--font-main) !important; }
button:hover, input[type="submit"]:hover, input[type="button"]:hover { background:#2f2f2f !important; }

/* image-viewer (baguettebox) chrome */
#baguetteBox-overlay button, #bbox-btns button, #bbox-navbar button {
  background:rgba(13,13,13,.85) !important; border:1px solid #333 !important;
  color:#cfcfcf !important; border-radius:0 !important; box-shadow:none !important;
}
#baguetteBox-overlay button:hover { color:#a9c8ea !important; border-color:#5a8cc7 !important; }

/* loading spinner (inline-styled by JS -> needs !important); circle exempt from r0 */
.dumb_loader_thing { border:.2em solid #2a2a2a !important; border-top:.2em solid #7ea6d6 !important; border-radius:50% !important; box-shadow:none !important; }

/* tooltips */
#tt, #tth { background:#0d0d0d !important; border:1px solid #333 !important; color:#cfcfcf !important; box-shadow:0 6px 20px rgba(0,0,0,.6) !important; border-radius:0 !important; }
#tt code { background:#1a1a1a !important; border:1px solid #333 !important; color:#a9c8ea !important; }

/* native controls */
input[type=range] { accent-color:#7ea6d6; }
video { color-scheme:dark; }

/* account chip + folder-nav row */
#acc_info { color:#8a8a8a !important; text-shadow:none !important; }
#acc_info a { color:#7ea6d6 !important; }

/* "Index of /path" heading */
#itx-io { color:#e9e9e9; margin-right:.3em; }
#path { font-size:1.15em !important; border-bottom:1px solid #333 !important; padding:.35em .2em !important; background:transparent !important; }
#path a { text-decoration:none !important; background:transparent !important; }
#path a:hover { text-decoration:underline !important; }