/* ============================================================
   ELVEDYN CLOUD — File Browser theme
   Motif: editm3u.com dark (graphite + amber accent + colour bars)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #0e1113;
  --panel: #15191c;
  --raised: #1b2125;
  --hover: #222a2f;
  --line: #262d33;
  --line-soft: #1e2429;
  --text: #e6eaec;
  --muted: #909aa1;
  --faint: #69737a;
  --accent: #ff9f1c;
  --accent-ink: #1a1206;
  --accent-soft: rgba(255, 159, 28, 0.13);
  --accent-hover: #e89010;
  --ok: #3fbf6b;
  --bad: #e0393e;
  --shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.85);
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 11px;

  /* FileBrowser legacy aliases */
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --background: var(--bg);
  --surface: var(--panel);
  --surface-hover: var(--hover);
  --text-muted: var(--muted);
  --border: var(--line);

  /* SMPTE colour bars */
  --bar-1: #c9d62b;
  --bar-2: #3fbf6b;
  --bar-3: #2fc6d6;
  --bar-4: #d64bb0;
  --bar-5: #e0393e;
  --bar-6: #3a6be0;
}

/* ---------- base ---------- */
html, body, #app {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

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

/* Thin colour-bar strip across the top — editm3u identity */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--bar-1) 0 16.66%,
    var(--bar-2) 16.66% 33.33%,
    var(--bar-3) 33.33% 50%,
    var(--bar-4) 50% 66.66%,
    var(--bar-5) 66.66% 83.33%,
    var(--bar-6) 83.33% 100%
  );
}

/* ---------- surfaces ---------- */
header,
nav,
.card,
.sidebar,
.prompts,
.file-list,
.dashboard,
.listing,
.breadcrumbs,
.action,
#nav,
.shell,
.main {
  background-color: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

header {
  border-bottom: 1px solid var(--line-soft) !important;
  box-shadow: none !important;
}

.sidebar,
#nav {
  border-right: 1px solid var(--line-soft) !important;
}

/* ---------- login / brand ---------- */
.card h1,
.login h1,
.card > h1,
.card div[class*='title'],
.login div[class*='title'],
div.card > span,
.login span {
  display: none !important;
}

#login h1 {
  font-size: 16px !important;
  line-height: 1.2 !important;
  margin: 5px 0 !important;
}

.card,
#login .card,
.login {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow) !important;
}

.card img,
.login img,
.sidebar__brand img,
.card svg,
#login img {
  width: 310px !important;
  height: auto !important;
  max-width: 90vw !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 30px auto !important;
}

/* ---------- icons ---------- */
.item i.material-icons,
.file-item i,
.icon.folder,
.item .material-icons,
.listing .item i {
  color: var(--accent) !important;
}

.item svg.material-icons,
.file-icon svg,
.item svg {
  fill: var(--accent) !important;
  color: var(--accent) !important;
}

/* ---------- buttons ---------- */
button,
.button,
.action button,
.file-icons button {
  border-radius: var(--r-md) !important;
  transition: background 0.14s cubic-bezier(0.2, 0.6, 0.3, 1),
    color 0.14s ease,
    border-color 0.14s ease !important;
}

button.button--primary,
button.button-blue,
input[type='submit'],
.button--blue,
.action-bar button.button--primary,
.dashboard .button.button--blue {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

button.button--primary:hover,
button.button-blue:hover,
input[type='submit']:hover,
.button--blue:hover {
  background: var(--accent-hover) !important;
  color: var(--accent-ink) !important;
}

button.button--flat,
.button--flat,
button.counter {
  background: var(--raised) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

button.button--flat:hover,
.button--flat:hover {
  background: var(--hover) !important;
  border-color: var(--faint) !important;
}

/* ---------- sidebar / side menu hover ---------- */
#nav,
.sidebar,
nav {
  background: var(--panel) !important;
}

#nav .action,
#nav a,
.sidebar .action,
.sidebar a,
nav .action,
nav a,
#nav > div > div,
.sidebar__link {
  border-radius: 8px !important;
  border-left: 3px solid transparent !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  color: var(--text) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 450 !important;
}

#nav .action i,
#nav a i,
.sidebar .action i,
.sidebar a i,
nav .action i,
nav a i {
  font-size: 18px !important;
}

#nav .action:hover,
#nav a:hover,
.sidebar .action:hover,
.sidebar a:hover,
nav .action:hover,
nav a:hover,
#nav > div > div:hover {
  background: rgba(255, 159, 28, 0.06) !important;
  border-left-color: var(--accent) !important;
  color: #fff !important;
}

#nav .action:hover i,
#nav a:hover i,
.sidebar .action:hover i,
nav .action:hover i {
  color: var(--accent) !important;
}

#nav .action.active,
#nav a.active,
.sidebar .action.active,
nav .action.active {
  background: var(--accent-soft) !important;
  border-left-color: var(--accent) !important;
  color: #fff !important;
}

/* ---------- file rows / mosaic cards (editm3u list feel) ---------- */
.item,
.file,
.listing .item,
.file-list .item,
#listing .item {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  border-left: 3px solid transparent !important;
  background: var(--raised) !important;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
  color: var(--text) !important;
}

.item:hover,
.file:hover,
tr:hover,
.listing .item:hover,
#listing .item:hover {
  background: rgba(255, 159, 28, 0.06) !important;
  border-color: rgba(255, 159, 28, 0.12) !important;
  border-left-color: var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

.item:hover i.material-icons,
.listing .item:hover i.material-icons,
#listing .item:hover i {
  color: var(--accent) !important;
  filter: none;
  transform: none;
}

.item.selected,
.file.selected,
.listing .item.active,
.item.active,
#listing .item.active {
  background: var(--accent-soft) !important;
  border-color: rgba(255, 159, 28, 0.2) !important;
  border-left: 3px solid var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

.listing .item:nth-child(6n+1):hover,
.file-list .item:nth-child(6n+1):hover,
#listing .item:nth-child(6n+1):hover { border-left-color: var(--bar-1) !important; }
.listing .item:nth-child(6n+2):hover,
.file-list .item:nth-child(6n+2):hover,
#listing .item:nth-child(6n+2):hover { border-left-color: var(--bar-2) !important; }
.listing .item:nth-child(6n+3):hover,
.file-list .item:nth-child(6n+3):hover,
#listing .item:nth-child(6n+3):hover { border-left-color: var(--bar-3) !important; }
.listing .item:nth-child(6n+4):hover,
.file-list .item:nth-child(6n+4):hover,
#listing .item:nth-child(6n+4):hover { border-left-color: var(--bar-4) !important; }
.listing .item:nth-child(6n+5):hover,
.file-list .item:nth-child(6n+5):hover,
#listing .item:nth-child(6n+5):hover { border-left-color: var(--bar-5) !important; }
.listing .item:nth-child(6n+6):hover,
.file-list .item:nth-child(6n+6):hover,
#listing .item:nth-child(6n+6):hover { border-left-color: var(--bar-6) !important; }

.item .name,
.item .title {
  color: var(--text) !important;
  font-weight: 500 !important;
}

.item .size,
.item .modified,
.item .meta,
.item small {
  color: var(--muted) !important;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace !important;
  font-size: 12px !important;
}

/* ---------- forms ---------- */
input,
select,
textarea,
.input {
  background: var(--raised) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--faint) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  outline: 2px solid var(--accent-soft) !important;
  outline-offset: 1px !important;
}

/* ---------- breadcrumbs / path ---------- */
.breadcrumbs,
.breadcrumb {
  background: transparent !important;
  color: var(--muted) !important;
}

.breadcrumbs a,
.breadcrumb a {
  color: var(--muted) !important;
}

.breadcrumbs a:hover,
.breadcrumb a:hover {
  color: var(--accent) !important;
}

/* ---------- modals / overlays ---------- */
.card.floating,
.popup,
.modal,
.share,
.prompts .card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow) !important;
}

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
  background-clip: padding-box;
  border: 3px solid transparent;
}
::-webkit-scrollbar-track { background: transparent; }

/* ---------- thumbnails vs full preview ---------- */
.file-list .item img,
.file-list--grid .item .preview img,
.listing--gallery .item img,
.card img.preview {
  object-fit: contain !important;
  max-height: 110px !important;
  width: auto !important;
  max-width: 100% !important;
  border-radius: var(--r-sm) !important;
}

.preview__viewer img,
.lightbox img,
div[class*='preview'] img,
.viewer img {
  max-height: 90vh !important;
  max-width: 90vw !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ---------- misc polish ---------- */
.progress,
.progressbar,
.bar {
  background: var(--line-soft) !important;
}

.progress > *,
.progressbar > *,
.bar > * {
  background: var(--accent) !important;
}

.dropdown,
.context-menu,
.menu {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow) !important;
}

.dropdown a:hover,
.context-menu a:hover,
.menu a:hover,
.dropdown li:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
}

table th {
  color: var(--faint) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--line-soft) !important;
}

table td {
  border-color: var(--line-soft) !important;
  color: var(--text) !important;
}

/* ---------- storage progress (nav div.credits has huge inline margin) ---------- */
nav div.credits {
  width: 78% !important;
  margin: 0.7em 1.1em 0.9em !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  color: var(--muted) !important;
}

nav div.credits > div {
  height: 3px !important;
  max-height: 3px !important;
  min-height: 3px !important;
  background: var(--line) !important;
  border-radius: 999px !important;
  margin: 0 0 6px 0 !important;
  overflow: hidden !important;
}

nav div.credits > div > div {
  height: 3px !important;
  max-height: 3px !important;
  min-height: 3px !important;
  background: var(--accent) !important;
  border-radius: 999px !important;
}

/* keep version/help footer untouched */
nav p.credits {
  font-size: 0.6em !important;
  margin: 1.2em 1.1em !important;
}