/* ============================================================
   Proton Drive "Carbon" Theme for FileBrowser v2.61
   ============================================================
   Built against FileBrowser's actual DOM + CSS variable system.
   Overrides both :root and .dark for full specificity coverage.
   ============================================================ */

/* ============================================================
   VARIABLE OVERRIDES
   FileBrowser uses :root for light, .dark for dark.
   We override BOTH to guarantee our values always win.
   ============================================================ */

:root {
  /* Proton Carbon backgrounds */
  --background: #1a1d24 !important;
  --surfacePrimary: #262a33 !important;
  --surfaceSecondary: #363a46 !important;

  /* Proton Carbon text */
  --textPrimary: #a4a9b5 !important;
  --textSecondary: #ffffff !important;

  /* Dividers / borders */
  --divider: rgba(255, 255, 255, 0.06) !important;
  --borderPrimary: rgba(255, 255, 255, 0.06) !important;
  --borderSecondary: rgba(255, 255, 255, 0.12) !important;
  --dividerPrimary: rgba(255, 255, 255, 0.06) !important;
  --dividerSecondary: rgba(255, 255, 255, 0.10) !important;

  /* Icons */
  --iconPrimary: #a4a9b5 !important;
  --iconSecondary: #ffffff !important;
  --iconTertiary: #696f7d !important;

  /* Interaction */
  --hover: rgba(255, 255, 255, 0.06) !important;
  --action: #ffffff !important;

  /* Buttons */
  --blue: #6d4aff !important;
  --dark-blue: #5b3ed9 !important;
  --red: #ed4c51 !important;
  --dark-red: #d42f34 !important;

  /* Input states */
  --input-red: rgba(237, 76, 81, 0.15) !important;
  --input-green: rgba(52, 145, 114, 0.15) !important;

  /* File type icon colors — Proton-inspired, bright on dark */
  --icon-red: #ed4c51 !important;
  --icon-orange: #f5930a !important;
  --icon-yellow: #f5c30a !important;
  --icon-green: #349172 !important;
  --icon-blue: #657ee4 !important;
  --icon-violet: #6d4aff !important;
}

/* Ensure .dark class can't override us */
body.dark,
.dark {
  --background: #1a1d24 !important;
  --surfacePrimary: #262a33 !important;
  --surfaceSecondary: #363a46 !important;
  --textPrimary: #a4a9b5 !important;
  --textSecondary: #ffffff !important;
  --divider: rgba(255, 255, 255, 0.06) !important;
  --borderPrimary: rgba(255, 255, 255, 0.06) !important;
  --borderSecondary: rgba(255, 255, 255, 0.12) !important;
  --dividerPrimary: rgba(255, 255, 255, 0.06) !important;
  --dividerSecondary: rgba(255, 255, 255, 0.10) !important;
  --iconPrimary: #a4a9b5 !important;
  --iconSecondary: #ffffff !important;
  --iconTertiary: #696f7d !important;
  --hover: rgba(255, 255, 255, 0.06) !important;
  --action: #ffffff !important;
  --blue: #6d4aff !important;
  --dark-blue: #5b3ed9 !important;
  --red: #ed4c51 !important;
  --dark-red: #d42f34 !important;
  --input-red: rgba(237, 76, 81, 0.15) !important;
  --input-green: rgba(52, 145, 114, 0.15) !important;
  --icon-red: #ed4c51 !important;
  --icon-orange: #f5930a !important;
  --icon-yellow: #f5c30a !important;
  --icon-green: #349172 !important;
  --icon-blue: #657ee4 !important;
  --icon-violet: #6d4aff !important;
}

/* ============================================================
   GLOBAL TYPOGRAPHY + BASE
   ============================================================ */

/* Font: apply to specific text elements only, never touch <i> / .material-icons */
body,
input,
select,
textarea,
button,
.button,
.action span,
.breadcrumbs,
.item .name,
.item .size,
.item .modified,
.card,
#login h1,
#login p,
#login input,
h1, h2, h3, h4, p, span, label, th, td, a {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

body {
  background: var(--background) !important;
  color: var(--textSecondary) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================================
   LOGIN PAGE
   FileBrowser login: #login with form at fixed center,
   max-width 16em, h1 title, img logo, inputs, submit
   ============================================================ */

#login {
  background:
    radial-gradient(ellipse at 25% 40%, rgba(109, 74, 255, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 25%, rgba(101, 126, 228, 0.07) 0%, transparent 50%),
    #1a1d24 !important;
}

#login form {
  background: #262a33 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5) !important;
  padding: 36px 32px 32px !important;
  max-width: 22em !important;
}

#login img {
  width: 3.5em !important;
  height: 3.5em !important;
  margin-bottom: 8px !important;
  filter: brightness(1.3) saturate(0.9) !important;
}

#login h1 {
  color: #ffffff !important;
  font-size: 1.6em !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.5em !important;
}

/* Subtitle / "Create account" link */
#login p {
  color: #657ee4 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

#login p:hover {
  color: #6d4aff !important;
}

/* Error message */
#login .wrong {
  background: rgba(237, 76, 81, 0.12) !important;
  color: #ed4c51 !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

/* Logout message */
#login .logout-message {
  background: rgba(245, 147, 10, 0.12) !important;
  color: #f5930a !important;
  border-radius: 8px !important;
}

/* Form inputs */
#login input[type="text"],
#login input[type="password"] {
  background: #2e323c !important;
  border: 1px solid #464b58 !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  height: auto !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

#login input[type="text"]:focus,
#login input[type="password"]:focus {
  border-color: #6d4aff !important;
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.15) !important;
}

#login input[type="text"]::placeholder,
#login input[type="password"]::placeholder {
  color: #696f7d !important;
}

#login input[type="submit"] {
  background: #6d4aff !important;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 0 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
  letter-spacing: 0.01em !important;
  width: 100% !important;
}

#login input[type="submit"]:hover {
  background: #5b3ed9 !important;
  box-shadow: 0 4px 16px rgba(109, 74, 255, 0.3) !important;
}

#login input[type="submit"]:active {
  background: #4a32b3 !important;
}

/* ============================================================
   HEADER / TOOLBAR
   ============================================================ */

header {
  background: #262a33 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

header .action {
  color: #a4a9b5 !important;
  border-radius: 8px !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

header .action:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

header .action i {
  color: inherit !important;
}

header img {
  filter: brightness(1.2) !important;
}

/* ============================================================
   SIDEBAR / NAV
   ============================================================ */

nav {
  background: #1a1d24 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

nav.active {
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
}

nav .action {
  color: #a4a9b5 !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 8px 12px !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

nav .action:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

nav .action i {
  color: inherit !important;
  font-size: 20px !important;
}

nav .action.router-link-active,
nav .action[aria-current] {
  background: rgba(109, 74, 255, 0.12) !important;
  color: #6d4aff !important;
  font-weight: 500 !important;
}

nav .action.router-link-active i,
nav .action[aria-current] i {
  color: #6d4aff !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumbs {
  background: transparent !important;
}

.breadcrumbs span {
  color: #696f7d !important;
}

.breadcrumbs a {
  color: #a4a9b5 !important;
  text-decoration: none !important;
}

.breadcrumbs a:hover {
  color: #6d4aff !important;
}

/* ============================================================
   FILE LISTING
   ============================================================ */

#listing {
  background: #262a33 !important;
}

/* Column headers (list view) */
#listing .item.header {
  background: #262a33 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#listing .item.header > div {
  color: #696f7d !important;
}

#listing .item.header span,
#listing .item.header p,
#listing .item.header .name,
#listing .item.header .size,
#listing .item.header .modified {
  color: #696f7d !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

#listing .item.header a {
  color: #696f7d !important;
}

#listing .item.header .active,
#listing .item.header .active span {
  color: #a4a9b5 !important;
}

/* File/folder rows */
#listing .item {
  border-color: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  transition: background 0.12s ease !important;
}

#listing .item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

#listing .item[aria-selected="true"] {
  background: #6d4aff !important;
  color: #ffffff !important;
}

/* Selected items — icon + text stay white */
#listing .item[aria-selected="true"] i {
  color: #ffffff !important;
}

#listing .item[aria-selected="true"] .name,
#listing .item[aria-selected="true"] .size,
#listing .item[aria-selected="true"] .modified {
  color: #ffffff !important;
}

#listing .item .name {
  color: #ffffff !important;
  font-weight: 500 !important;
}

#listing .item .size,
#listing .item .modified {
  color: #696f7d !important;
  font-size: 0.85em !important;
}

/* ============================================================
   FILE TYPE ICON COLORS (override FileBrowser defaults)
   These target .file-icons selectors from built-in CSS
   ============================================================ */

/* Folders — Proton blue-purple */
.file-icons [data-dir="true"] i {
  color: #657ee4 !important;
}

/* Audio — warm yellow */
.file-icons [data-type="audio"] i {
  color: #f5c30a !important;
}

/* Images — orange */
.file-icons [data-type="image"] i {
  color: #f5930a !important;
}

/* Video — violet */
.file-icons [data-type="video"] i {
  color: #6d4aff !important;
}

/* PDF — red */
.file-icons [data-type="pdf"] i {
  color: #ed4c51 !important;
}

/* Text/docs — blue */
.file-icons [data-type="text"] i {
  color: #657ee4 !important;
}

/* Generic/blob files — muted */
.file-icons [data-type="blob"] i {
  color: #a4a9b5 !important;
}

/* Invalid links — dim red */
.file-icons [data-type="invalid_link"] i {
  color: #ed4c51 !important;
}

/* Extension-specific overrides to match Proton palette */
.file-icons [data-ext=".pdf"] i { color: #ed4c51 !important; }
.file-icons [data-ext=".html"] i,
.file-icons [data-ext=".vue"] i { color: #f5930a !important; }
.file-icons [data-ext=".css"] i,
.file-icons [data-ext=".js"] i,
.file-icons [data-ext=".json"] i { color: #f5c30a !important; }
.file-icons [data-ext=".go"] i,
.file-icons [data-ext=".xls"] i,
.file-icons [data-ext=".xlsx"] i { color: #349172 !important; }
.file-icons [data-ext=".py"] i,
.file-icons [data-ext=".rb"] i { color: #657ee4 !important; }
.file-icons [data-ext=".java"] i,
.file-icons [data-ext=".jar"] i { color: #ed4c51 !important; }
.file-icons [data-ext=".php"] i,
.file-icons [data-ext=".rar"] i,
.file-icons [data-ext=".iso"] i { color: #6d4aff !important; }
.file-icons [data-ext=".zip"] i,
.file-icons [data-ext=".gz"] i,
.file-icons [data-ext=".tar"] i,
.file-icons [data-ext=".7z"] i { color: #f5c30a !important; }
.file-icons [data-ext=".doc"] i,
.file-icons [data-ext=".docx"] i,
.file-icons [data-ext=".odt"] i { color: #657ee4 !important; }
.file-icons [data-ext=".ppt"] i,
.file-icons [data-ext=".pptx"] i { color: #f5930a !important; }
.file-icons [data-ext=".exe"] i,
.file-icons [data-ext=".msi"] i,
.file-icons [data-ext=".bat"] i { color: #657ee4 !important; }
.file-icons [data-ext=".sh"] i { color: #349172 !important; }
.file-icons [data-ext=".md"] i { color: #a4a9b5 !important; }
.file-icons [data-ext=".yml"] i,
.file-icons [data-ext=".yaml"] i,
.file-icons [data-ext=".xml"] i { color: #f5930a !important; }
.file-icons [data-ext=".c"] i,
.file-icons [data-ext=".cpp"] i,
.file-icons [data-ext=".h"] i { color: #657ee4 !important; }
.file-icons [data-ext=".rs"] i { color: #f5930a !important; }
.file-icons [data-ext=".ts"] i { color: #657ee4 !important; }
.file-icons [data-ext=".svg"] i { color: #f5930a !important; }
.file-icons [data-ext=".csv"] i,
.file-icons [data-ext=".db"] i { color: #349172 !important; }
.file-icons [data-ext=".ttf"] i,
.file-icons [data-ext=".otf"] i,
.file-icons [data-ext=".woff"] i,
.file-icons [data-ext=".woff2"] i { color: #a4a9b5 !important; }
.file-icons [data-ext=".dmg"] i { color: #657ee4 !important; }
.file-icons [data-ext=".log"] i { color: #696f7d !important; }

/* Hidden/dotfiles — keep subtle */
.file-icons [aria-label^="."],
.file-icons [data-ext=".bak"] {
  opacity: 0.4 !important;
}

/* ============================================================
   MOSAIC / GRID VIEW
   ============================================================ */

#listing.mosaic .item {
  background: #2e323c !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

#listing.mosaic .item:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

#listing.mosaic .item[aria-selected="true"] {
  border-color: #6d4aff !important;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.25) !important;
}

/* Thumbnail/icon area */
#listing.mosaic .item div:first-of-type {
  background: #363a46 !important;
}

/* Name/info area below thumbnail */
#listing.mosaic .item div:last-of-type {
  background: #2e323c !important;
}

/* Image type overlay gradient */
#listing.mosaic .item[data-type="image"] div:last-of-type {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)) !important;
}

/* Mosaic icon sizing */
#listing.mosaic .item i {
  opacity: 0.7 !important;
}

/* ============================================================
   SEARCH
   ============================================================ */

#search #input {
  background: #2e323c !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#search.active #input {
  border-color: #6d4aff !important;
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.12) !important;
}

#search input {
  background: transparent !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

#search input::placeholder {
  color: #696f7d !important;
}

#search #input > i {
  color: #696f7d !important;
}

#search.active #input > i {
  color: #a4a9b5 !important;
}

/* Search results dropdown */
#search #result {
  background: #2e323c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  margin-top: 4px !important;
}

#search #result ul li a {
  color: #ffffff !important;
  border-radius: 6px !important;
}

#search #result ul li a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

#search #result ul li a i {
  color: #696f7d !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary / blue buttons — Proton purple */
.button--blue,
button.button--blue {
  background: #6d4aff !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
}

.button--blue:hover,
button.button--blue:hover {
  background: #5b3ed9 !important;
  box-shadow: 0 2px 8px rgba(109, 74, 255, 0.25) !important;
}

/* Red/danger buttons */
.button--red {
  background: #ed4c51 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
}

.button--red:hover {
  background: #d42f34 !important;
}

/* Flat/ghost buttons */
.button--flat {
  background: transparent !important;
  color: #a4a9b5 !important;
  border: none !important;
}

.button--flat:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.button--flat.button--red {
  color: #ed4c51 !important;
  background: transparent !important;
}

.button--flat.button--red:hover {
  background: rgba(237, 76, 81, 0.1) !important;
}

/* Generic .action buttons (toolbar, dropdown items) */
.action {
  color: #a4a9b5 !important;
  border-radius: 8px !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

.action:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.action i {
  color: inherit !important;
}

/* ============================================================
   INPUTS (generic)
   ============================================================ */

input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
  background: #2e323c !important;
  border: 1px solid #464b58 !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: #6d4aff !important;
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.12) !important;
}

::placeholder {
  color: #696f7d !important;
}

input[type="checkbox"] {
  accent-color: #6d4aff !important;
}

/* ============================================================
   CARDS / MODALS / DIALOGS
   ============================================================ */

.card {
  background: #2e323c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  color: #ffffff !important;
}

.card .card-title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.card .card-content {
  color: #ffffff !important;
}

.card .card-action {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.card h2 {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.card h3 {
  color: #a4a9b5 !important;
  font-weight: 600 !important;
}

.card code {
  background: #363a46 !important;
  color: #657ee4 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
}

/* ============================================================
   DROPDOWN MENU
   ============================================================ */

#dropdown {
  background: #2e323c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
  padding: 6px !important;
}

#dropdown .action {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin: 1px 0 !important;
}

#dropdown .action span:not(.counter) {
  color: #ffffff !important;
}

#dropdown .action i {
  color: #696f7d !important;
}

#dropdown .action:hover i {
  color: #a4a9b5 !important;
}

#dropdown .counter {
  background: #6d4aff !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ============================================================
   SHARE DIALOG
   ============================================================ */

.card#share input,
.card#share select {
  background: #363a46 !important;
}

.card#share ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.card#share ul li a {
  color: #657ee4 !important;
  word-break: break-all !important;
}

.card#share .action.copy-clipboard {
  color: #a4a9b5 !important;
}

.card#share .action.copy-clipboard.active {
  color: #349172 !important;
}

/* Public share page */
.share {
  background: #1a1d24 !important;
}

.share__box {
  background: #262a33 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.share__box__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.share__box__icon i {
  color: #6d4aff !important;
}

.share__box__info {
  color: #a4a9b5 !important;
}

.share__wrong__password {
  color: #ed4c51 !important;
}

/* ============================================================
   FILE PREVIEW
   ============================================================ */

#previewer {
  background: rgba(26, 29, 36, 0.94) !important;
}

#previewer header {
  background: #262a33 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#previewer header .action i {
  color: #a4a9b5 !important;
}

#previewer header .action:hover i {
  color: #ffffff !important;
}

#previewer .preview pre {
  background: #1a1d24 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

#previewer .preview .info {
  background: #262a33 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

/* Prev/next nav buttons */
#previewer > button {
  background: #2e323c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  width: 44px !important;
  height: 44px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

#previewer > button:hover {
  background: #363a46 !important;
}

#previewer > button i {
  color: #ffffff !important;
}

#previewer h2.message {
  color: #a4a9b5 !important;
}

/* ============================================================
   EDITOR
   ============================================================ */

#editor-container {
  background: #1a1d24 !important;
}

#editor-container .bar {
  background: #262a33 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#editor-container #editor {
  background: #1a1d24 !important;
  color: #ffffff !important;
}

/* ============================================================
   UPLOAD PANEL
   ============================================================ */

.upload-files .card.floating {
  background: #2e323c !important;
}

.upload-files .file {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.upload-files .file .file-name {
  color: #ffffff !important;
}

.upload-files .file .file-name i {
  color: #696f7d !important;
}

.upload-files .file .file-progress {
  background: #363a46 !important;
  border-radius: 3px !important;
  height: 4px !important;
}

.upload-files .file .file-progress div {
  background: #6d4aff !important;
  border-radius: 3px !important;
}

/* ============================================================
   SETTINGS / DASHBOARD
   ============================================================ */

.dashboard {
  background: #1a1d24 !important;
}

.dashboard .card {
  background: #262a33 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.dashboard p label {
  color: #a4a9b5 !important;
  font-size: 13px !important;
}

.dashboard #nav {
  background: #1a1d24 !important;
}

.dashboard #nav ul li {
  color: #a4a9b5 !important;
  border-radius: 8px !important;
  transition: background 0.12s ease !important;
}

.dashboard #nav ul li:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
}

.dashboard #nav ul li.active {
  background: rgba(109, 74, 255, 0.12) !important;
  color: #6d4aff !important;
}

.dashboard #nav ul li.active::before {
  background: #6d4aff !important;
}

/* Tables */
table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

table th {
  color: #696f7d !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

table td {
  color: #ffffff !important;
}

/* ============================================================
   TOASTS
   ============================================================ */

.Vue-Toastification__toast {
  background: #2e323c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
}

.Vue-Toastification__toast--success {
  border-left: 3px solid #349172 !important;
}

.Vue-Toastification__toast--error {
  border-left: 3px solid #ed4c51 !important;
}

.Vue-Toastification__toast--warning {
  border-left: 3px solid #f5930a !important;
}

.Vue-Toastification__toast--info {
  border-left: 3px solid #2c89db !important;
}

.Vue-Toastification__close-button {
  color: #696f7d !important;
}

.Vue-Toastification__progress-bar {
  background: #6d4aff !important;
}

/* ============================================================
   LOADING SPINNER
   ============================================================ */

#loading {
  background: #1a1d24 !important;
}

#loading .spinner > div,
main .spinner > div {
  background: #6d4aff !important;
}

/* ============================================================
   SHELL / TERMINAL
   ============================================================ */

.shell {
  background: #0d1117 !important;
}

.shell__content {
  background: #0d1117 !important;
  color: #e6edf3 !important;
}

.shell__prompt {
  color: #6d4aff !important;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.message {
  color: #a4a9b5 !important;
}

.message i {
  color: #696f7d !important;
  opacity: 0.6 !important;
}

h2.message {
  color: #a4a9b5 !important;
  font-weight: 400 !important;
}

/* ============================================================
   LINKS (global)
   ============================================================ */

a {
  color: #657ee4 !important;
  text-decoration: none !important;
}

a:hover {
  color: #6d4aff !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #464b58;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5a5f6d;
}

* {
  scrollbar-width: thin !important;
  scrollbar-color: #464b58 transparent !important;
}

/* ============================================================
   TEXT SELECTION
   ============================================================ */

::selection {
  background: rgba(109, 74, 255, 0.3);
  color: #ffffff;
}

/* ============================================================
   PROGRESS BAR (generic)
   ============================================================ */

.progress {
  background: #363a46 !important;
  border-radius: 3px !important;
}

.progress div {
  background: #6d4aff !important;
  border-radius: 3px !important;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {
  #login form {
    padding: 28px 24px 24px !important;
    border-radius: 12px !important;
    max-width: 20em !important;
  }

  #login h1 {
    font-size: 1.4em !important;
  }

  header {
    min-height: 48px !important;
  }

  nav.active {
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5) !important;
  }

  /* Generous touch targets */
  #listing .item {
    min-height: 52px !important;
  }

  .card {
    border-radius: 10px !important;
  }

  #dropdown .action {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  #previewer > button {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 480px) {
  #login form {
    padding: 24px 20px 20px !important;
    max-width: 18em !important;
  }
}