@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

/* ─── DISCO DROP — Full Theme Override ─────────────────────────── */

:root {
  --disco-bg:        #0c0c1a;
  --disco-surface:   #13132a;
  --disco-card:      #1a1a35;
  --disco-gold:      #d4a017;
  --disco-gold-light:#f0c040;
  --disco-purple:    #7c3aed;
  --disco-purple-lt: #a78bfa;
  --disco-text:      #f0eeff;
  --disco-muted:     #8880b0;
  --disco-border:    rgba(212, 160, 23, 0.25);
}

/* ─── Base ──────────────────────────────────────────── */
* { box-sizing: border-box; }

body, html, #app {
  background: var(--disco-bg) !important;
  color: var(--disco-text) !important;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif !important;
  min-height: 100vh;
}

/* ─── Header / Navbar ──────────────────────────────── */
#header, header, .header {
  background: linear-gradient(135deg, #0c0c1a 0%, #160e2e 100%) !important;
  border-bottom: 1px solid var(--disco-border) !important;
  box-shadow: 0 2px 20px rgba(124, 58, 237, 0.2) !important;
}

/* Override site name in header */
#header > div > a,
.header a:first-child,
nav a.logo {
  font-weight: 900 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.12em !important;
  background: linear-gradient(90deg, var(--disco-gold), var(--disco-purple-lt));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Nav icons and links */
#header a, header a, nav a {
  color: var(--disco-muted) !important;
  transition: color 0.2s !important;
}
#header a:hover, header a:hover {
  color: var(--disco-gold) !important;
}

/* User icon area */
#header .action, .topbar .action {
  color: var(--disco-muted) !important;
}
#header .action:hover {
  color: var(--disco-gold-light) !important;
}

/* ─── Sidebar ───────────────────────────────────────── */
#sidebar, .sidebar {
  background: var(--disco-surface) !important;
  border-right: 1px solid var(--disco-border) !important;
}
#sidebar a, .sidebar a {
  color: var(--disco-muted) !important;
}
#sidebar a:hover, .sidebar a:hover,
#sidebar a.router-link-active, .sidebar a.active {
  color: var(--disco-gold) !important;
  background: rgba(212, 160, 23, 0.08) !important;
}

/* ─── Main content area ─────────────────────────────── */
main, #main, .main {
  background: var(--disco-bg) !important;
}

/* ─── File browser / listing ────────────────────────── */
.item, .file-item, li.item {
  background: var(--disco-card) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--disco-text) !important;
  transition: all 0.2s ease !important;
}
.item:hover, .file-item:hover {
  border-color: var(--disco-border) !important;
  background: #1e1e3f !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 160, 23, 0.12) !important;
}
.item.selected, .file-item.selected {
  border-color: var(--disco-gold) !important;
  background: rgba(212, 160, 23, 0.1) !important;
}

/* ─── Upload / Drop zone ────────────────────────────── */
#upload-input + label,
.upload-area, .drop-area, #dropzone,
div[class*="upload"], div[class*="drop"] {
  border: 2px dashed var(--disco-gold) !important;
  border-radius: 16px !important;
  background: rgba(212, 160, 23, 0.04) !important;
  color: var(--disco-gold) !important;
  transition: all 0.3s ease !important;
}
.upload-area:hover, .drop-area:hover,
div[class*="upload"]:hover, div[class*="drop"]:hover {
  background: rgba(212, 160, 23, 0.1) !important;
  box-shadow: 0 0 30px rgba(212, 160, 23, 0.2) !important;
}

/* ─── Buttons ───────────────────────────────────────── */
.button, button, .btn,
input[type="submit"], input[type="button"] {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

/* Primary action button */
.button.is-primary, button.is-primary,
button[class*="upload"], a.button.is-primary {
  background: linear-gradient(135deg, var(--disco-gold), #b8860b) !important;
  color: #0c0c1a !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(212, 160, 23, 0.35) !important;
}
.button.is-primary:hover, button.is-primary:hover {
  background: linear-gradient(135deg, var(--disco-gold-light), var(--disco-gold)) !important;
  box-shadow: 0 6px 20px rgba(212, 160, 23, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* Secondary / ghost buttons */
.button:not(.is-primary), button:not(.is-primary):not([type="submit"]) {
  background: transparent !important;
  border: 1px solid var(--disco-border) !important;
  color: var(--disco-muted) !important;
}
.button:not(.is-primary):hover {
  border-color: var(--disco-gold) !important;
  color: var(--disco-gold) !important;
}

/* ─── Inputs & Forms ────────────────────────────────── */
input, select, textarea {
  background: var(--disco-card) !important;
  border: 1px solid var(--disco-border) !important;
  color: var(--disco-text) !important;
  border-radius: 8px !important;
  font-family: 'Space Grotesk', sans-serif !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--disco-gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15) !important;
  outline: none !important;
}

/* ─── Login page ────────────────────────────────────── */
#login, .login-container, div[class*="login"] {
  background: var(--disco-bg) !important;
}

/* Login card */
.card, .box, [class*="card"] {
  background: var(--disco-card) !important;
  border: 1px solid var(--disco-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(124, 58, 237, 0.2) !important;
}

/* Logo on login page */
img[src*="img"], img[class*="logo"], .login img {
  filter: drop-shadow(0 0 20px rgba(212, 160, 23, 0.4)) !important;
  max-width: 160px !important;
}

/* ─── Breadcrumbs / path bar ────────────────────────── */
#breadcrumbs, .breadcrumbs, nav[class*="breadcrumb"] {
  background: var(--disco-surface) !important;
  border-bottom: 1px solid var(--disco-border) !important;
  color: var(--disco-muted) !important;
}
#breadcrumbs a, .breadcrumbs a {
  color: var(--disco-gold) !important;
}

/* ─── Toolbar ───────────────────────────────────────── */
#toolbar, .toolbar, .actions {
  background: var(--disco-surface) !important;
  border-bottom: 1px solid var(--disco-border) !important;
}
.toolbar a, .actions a, #toolbar a {
  color: var(--disco-muted) !important;
}
.toolbar a:hover, .actions a:hover, #toolbar a:hover {
  color: var(--disco-gold) !important;
}

/* ─── Progress bars ─────────────────────────────────── */
progress, .progress {
  accent-color: var(--disco-gold) !important;
}
progress::-webkit-progress-value { background: var(--disco-gold) !important; }
progress::-webkit-progress-bar   { background: var(--disco-surface) !important; }
progress::-moz-progress-bar      { background: var(--disco-gold) !important; }

/* Upload progress notification bar */
[class*="transfer"], [class*="upload-progress"], .progress-bar {
  background: var(--disco-card) !important;
  border: 1px solid var(--disco-border) !important;
  border-radius: 12px !important;
  color: var(--disco-text) !important;
}

/* ─── Notifications / Toasts ────────────────────────── */
.toast, .notification, [class*="notify"], [class*="alert"] {
  background: var(--disco-card) !important;
  border-left: 3px solid var(--disco-gold) !important;
  color: var(--disco-text) !important;
  border-radius: 8px !important;
}

/* ─── Modals / Overlays ─────────────────────────────── */
.modal, [class*="overlay"], [class*="modal"] {
  background: rgba(12, 12, 26, 0.85) !important;
  backdrop-filter: blur(4px) !important;
}
.modal-card, .modal-content, [class*="modal"] .card {
  background: var(--disco-card) !important;
  border: 1px solid var(--disco-border) !important;
  border-radius: 16px !important;
}

/* ─── Scrollbars ────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--disco-bg); }
::-webkit-scrollbar-thumb {
  background: rgba(212, 160, 23, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--disco-gold); }

/* ─── Disco shimmer on drop zone drag-over ──────────── */
@keyframes discoShimmer {
  0%   { box-shadow: 0 0 20px rgba(212,160,23,0.3), 0 0 40px rgba(124,58,237,0.2); }
  50%  { box-shadow: 0 0 30px rgba(212,160,23,0.5), 0 0 60px rgba(124,58,237,0.3); }
  100% { box-shadow: 0 0 20px rgba(212,160,23,0.3), 0 0 40px rgba(124,58,237,0.2); }
}
.dragover, [class*="drag-over"], [class*="dragover"] {
  animation: discoShimmer 1.5s ease-in-out infinite !important;
  border-color: var(--disco-gold-light) !important;
}

/* ─── Typography tweaks ─────────────────────────────── */
h1, h2, h3, h4, h5 {
  color: var(--disco-text) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
}
a { color: var(--disco-gold) !important; }
a:hover { color: var(--disco-gold-light) !important; }

/* ─── Icons (material icons) ────────────────────────── */
.material-icons, i[class*="icon"] {
  color: inherit !important;
}