/* JD Portfolio Theme for File Browser - Stable Version */

/* === Core Colors === */
:root {
  --primary: #667eea;
  --secondary: #764ba2;
  --bg-dark: #18183b;
  --bg-darker: #0f0f1e;
  --bg-darkest: #0e1526;
  --text-primary: #e6e6e6;
  --text-secondary: #c0c0c0;
  --text-muted: #a0a0a0;
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-border: rgba(255, 255, 255, 0.08);
  --hover-shadow: rgba(102, 126, 234, 0.3);
}

/* === General Layout === */
body,
#app,
.dashboard {
  background: linear-gradient(135deg, #18183b 25%, #0f0f1e 50%, #0e1526 100%) !important;
  color: var(--text-primary) !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  min-height: 100vh;
}

/* === Header === */
header,
.header,
.toolbar,
nav {
  background: rgba(10, 10, 24, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--card-border) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
  padding: 0.5rem 1rem !important;
}

header *,
.header *,
.toolbar * {
  color: var(--text-primary) !important;
}

/* === JD Logo Only === */
header > a:first-child,
.header > a:first-child,
header > div:first-child {
  display: none !important; /* hide default icon + brand */
}

.header::before,
header::before {
  content: '' !important;
  display: inline-block !important;
  width: 42px !important;
  height: 42px !important;
  background-image: url('/branding/logo.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 50% !important;
  margin-left: 15px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

/* === Buttons === */
button,
.button,
.btn,
a.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  font-weight: 600 !important;
  transition: background 0.3s ease !important;
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3) !important;
}

button:hover,
.button:hover,
.btn:hover,
a.button:hover {
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
}

/* === Panels and Cards === */
.card,
.panel,
.box,
.modal,
.dialog,
.file-list,
.listing {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px) !important;
  padding: 1.5rem !important;
  transition: none !important;
}

/* === File/Folder Items === */
.item,
.file-item,
.file,
.folder {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 6px !important;
  padding: 0.8rem !important;
  margin: 0.4rem 0 !important;
  color: var(--text-primary) !important;
  transition: none !important;
}

.item:hover,
.file-item:hover,
.file:hover,
.folder:hover {
  background: rgba(102, 126, 234, 0.1) !important;
  border-left: 4px solid var(--primary) !important;
}

/* === Stability Tweaks === */
* {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  animation: none !important;
}

tbody tr:hover,
tr:hover,
.item:hover,
.folder:hover {
  transform: none !important;
}

.modal,
.dialog {
  transform: none !important;
}

/* === Sidebar === */
.sidebar,
.nav-sidebar,
aside {
  background: rgba(255, 255, 255, 0.03) !important;
  border-right: 1px solid var(--card-border) !important;
  backdrop-filter: blur(10px) !important;
}

.sidebar a,
.nav-sidebar a,
aside a {
  color: var(--text-primary) !important;
  padding: 0.75rem 1rem !important;
  border-radius: 6px !important;
  margin: 0.25rem 0 !important;
}

.sidebar a:hover,
.nav-sidebar a:hover,
aside a:hover {
  background: rgba(102, 126, 234, 0.2) !important;
  color: var(--primary) !important;
}

/* === Input Fields === */
input,
textarea,
select {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  padding: 0.7rem 1rem !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
  outline: none !important;
}

/* === Breadcrumbs === */
.breadcrumb {
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 1rem !important;
  border-radius: 12px !important;
  border: 1px solid var(--card-border) !important;
}

/* === Table === */
table {
  background: transparent !important;
  color: var(--text-primary) !important;
}

thead {
  background: rgba(102, 126, 234, 0.2) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* === Scrollbar === */
::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-radius: 10px !important;
}

/* === Footer === */
footer {
  background: rgba(0, 0, 0, 0.5) !important;
  color: var(--text-muted) !important;
  padding: 1.5rem !important;
  text-align: center !important;
  border-top: 1px solid var(--card-border) !important;
}

/* === Disable bouncing / layout shift === */
.file,
.folder,
.listing,
.modal,
.dialog {
  transform: none !important;
  transition: none !important;
}
/* === Force Logo Injection Fix === */
@keyframes injectLogo {
  from { opacity: 0; }
  to { opacity: 1; }
}

body::after {
  content: "" !important;
  position: fixed !important;
  top: 15px !important;
  left: 20px !important;
  width: 42px !important;
  height: 42px !important;
  background-image: url("/branding/logo.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  z-index: 9999 !important;
  animation: injectLogo 0.3s ease forwards !important;
}