/* ===========================================================
   Dainybox — Premium Dark Theme
   =========================================================== */

:root {
  --background: #0a0e1a !important;
  --surfacePrimary: #11172a !important;
  --surfaceSecondary: #1a2238 !important;
  --divider: rgba(255, 255, 255, 0.06) !important;
  --textPrimary: #e8edf7 !important;
  --textSecondary: #a0aec0 !important;
  --primaryColor: #8b5cf6 !important;
  --primary: #8b5cf6 !important;
  --primary-rgb: 139, 92, 246 !important;
  --accent: #06b6d4 !important;
  --hover: rgba(139, 92, 246, 0.12) !important;
  --selected: rgba(139, 92, 246, 0.18) !important;
  --shadow-color: 0deg 0% 0% !important;
  --shadow-elevation-medium: 0px 2px 4px hsl(var(--shadow-color) / 0.4), 0px 4px 12px hsl(var(--shadow-color) / 0.3) !important;
}

html, body, #app {
  background: var(--background) !important;
  color: var(--textPrimary) !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11" !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Header */
header {
  background: linear-gradient(135deg, #11172a 0%, #1a1f3a 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4) !important;
}
header .title, header .menu-button, header img.logo {
  color: var(--textPrimary) !important;
  filter: brightness(1.1);
}
header .title {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sidebar */
nav, aside {
  background: #0d1226 !important;
  border-right: 1px solid var(--divider) !important;
}
nav .action {
  color: var(--textSecondary) !important;
  border-radius: 10px !important;
  margin: 2px 8px !important;
  padding: 8px 14px !important;
  transition: all 0.15s ease !important;
}
nav .action:hover {
  background: var(--hover) !important;
  color: var(--textPrimary) !important;
}
nav .action.active {
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(6,182,212,0.12)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.3) inset;
}

/* File list */
#listing, main, .listing {
  background: var(--background) !important;
}
#listing.list .item {
  background: var(--surfacePrimary) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  padding: 10px 14px !important;
  transition: all 0.15s ease !important;
  color: var(--textPrimary) !important;
}
#listing.list .item:hover {
  background: var(--surfaceSecondary) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
#listing.list .item.header {
  background: transparent !important;
  border: none !important;
  color: var(--textSecondary) !important;
  font-weight: 600 !important;
  font-size: 0.8em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
#listing.mosaic .item {
  background: var(--surfacePrimary) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 12px !important;
  color: var(--textPrimary) !important;
  transition: all 0.15s ease !important;
}
#listing.mosaic .item:hover {
  border-color: rgba(139, 92, 246, 0.4) !important;
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Selected items */
.item.selected, .item[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(6,182,212,0.08)) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
}

/* Icons in file list — make them pop */
#listing .item i, .listing .item i, .item-icon {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.3));
}
#listing .item.type-folder i, .item.type-folder .item-icon {
  color: #fbbf24 !important;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
}
#listing .item.type-image i { color: #34d399 !important; }
#listing .item.type-video i { color: #f472b6 !important; }
#listing .item.type-audio i { color: #a78bfa !important; }
#listing .item.type-pdf  i { color: #f87171 !important; }
#listing .item.type-archive i { color: #fb923c !important; }

/* Buttons */
button, .button, .action {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}
.button--flat {
  color: var(--textPrimary) !important;
}
.button--flat:hover {
  background: var(--hover) !important;
}
.button.button--primary,
button.button--primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.button.button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.5);
}

/* Login screen */
#login {
  background: radial-gradient(ellipse at top, #1a1f3a 0%, #0a0e1a 60%) !important;
}
#login form {
  background: rgba(17, 23, 42, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.08) inset !important;
  padding: 40px !important;
}
#login form .input,
#login form input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--textPrimary) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  transition: all 0.15s ease !important;
}
#login form .input:focus,
#login form input:focus {
  border-color: rgba(139, 92, 246, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
}
#login form button,
#login button {
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px !important;
  font-weight: 600 !important;
  font-size: 1em !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3) !important;
}
#login form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5) !important;
}

/* Dialogs / Modals */
.card, .dialog, .prompt {
  background: var(--surfacePrimary) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 14px !important;
  color: var(--textPrimary) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* Inputs */
input[type="text"], input[type="password"], input[type="email"], textarea, select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--textPrimary) !important;
  border-radius: 8px !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.5); }

/* Progress bar */
.progress {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
}
.progress > div {
  background: linear-gradient(90deg, #8b5cf6, #06b6d4) !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5) !important;
}

/* Breadcrumbs */
.breadcrumbs {
  color: var(--textSecondary) !important;
}
.breadcrumbs a:hover {
  color: var(--accent) !important;
}

/* Drop zone overlay */
#dropzone, .upload-overlay {
  background: rgba(10, 14, 26, 0.92) !important;
  backdrop-filter: blur(20px);
}
#dropzone .item {
  border: 2px dashed rgba(139, 92, 246, 0.6) !important;
  background: rgba(139, 92, 246, 0.05) !important;
  border-radius: 16px !important;
}

/* Notifications */
.message {
  background: var(--surfacePrimary) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 10px !important;
  color: var(--textPrimary) !important;
}

/* Selection in lists */
::selection { background: rgba(139, 92, 246, 0.3); color: #fff; }

/* --- Quick Look keyboard focus --- */
#listing .item.kb-focus {
  outline: 2px solid #8b5cf6 !important;
  outline-offset: -2px !important;
  background: rgba(139, 92, 246, 0.18) !important;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.35) !important;
  transition: all 0.1s ease !important;
}
#listing.mosaic .item.kb-focus,
#listing.gallery .item.kb-focus {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: #8b5cf6 !important;
}