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

/* Vercel-like design system variables for Hope UI */
:root, body, body.hope-ui-dark, body.hope-ui-light {
  /* Border Radii */
  --hope-radii-none: 0px !important;
  --hope-radii-xs: 4px !important;
  --hope-radii-sm: 6px !important;
  --hope-radii-md: 8px !important;
  --hope-radii-lg: 12px !important;
  --hope-radii-xl: 16px !important;
  --hope-radii-2xl: 24px !important;
  --hope-radii-3xl: 32px !important;
  --hope-radii-full: 9999px !important;

  /* Typography */
  --hope-fonts-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;

  /* Standard borders & hover background variables */
  --border-color: rgba(0, 0, 0, 0.08);
  --hover-bg: rgba(0, 0, 0, 0.03);
  --header-bg: rgba(255, 255, 255, 0.85);
}

/* Dark theme design system colors */
body.hope-ui-dark {
  --border-color: rgba(255, 255, 255, 0.12);
  --hover-bg: rgba(255, 255, 255, 0.06);
  --header-bg: rgba(0, 0, 0, 0.8);

  --hope-colors-background: #000000 !important;
  --hope-colors-loContrast: #000000 !important;

  /* Neutral colors (grayscale) */
  --hope-colors-neutral1: #000000 !important;
  --hope-colors-neutral2: #0a0a0a !important; /* Panel background */
  --hope-colors-neutral3: #161616 !important; /* Row/button hover background */
  --hope-colors-neutral4: #222222 !important;
  --hope-colors-neutral5: #333333 !important; /* Border color */
  --hope-colors-neutral6: #444444 !important;
  --hope-colors-neutral7: #555555 !important;
  --hope-colors-neutral8: #888888 !important;
  --hope-colors-neutral9: #888888 !important; /* Muted secondary text */
  --hope-colors-neutral10: #cccccc !important;
  --hope-colors-neutral11: #a0a0a0 !important; /* Secondary text */
  --hope-colors-neutral12: #ffffff !important; /* Primary text */

  /* Primary color mapping (Monochrome White highlight) */
  --hope-colors-primary1: #0a0a0a !important;
  --hope-colors-primary2: #161616 !important;
  --hope-colors-primary3: #222222 !important; /* Subtle button bg */
  --hope-colors-primary4: #333333 !important;
  --hope-colors-primary5: #555555 !important;
  --hope-colors-primary6: #ffffff !important;
  --hope-colors-primary7: #eaeaea !important;
  --hope-colors-primary8: #cccccc !important;
  --hope-colors-primary9: #ffffff !important;  /* Solid button bg */
  --hope-colors-primary10: #eaeaea !important; /* Solid button hover */
  --hope-colors-primary11: #ffffff !important; /* Primary text / Subtle button text */
  --hope-colors-primary12: #000000 !important; /* Solid button text */

  /* Danger (Vercel Red) */
  --hope-colors-danger3: rgba(248, 113, 113, 0.12) !important;
  --hope-colors-danger8: #ef4444 !important;
  --hope-colors-danger9: #ef4444 !important;
  --hope-colors-danger10: #f87171 !important;
  --hope-colors-danger11: #f87171 !important;
  --hope-colors-danger12: #fee2e2 !important;

  /* Warning (Vercel Amber) */
  --hope-colors-warning3: rgba(245, 158, 11, 0.12) !important;
  --hope-colors-warning8: #f59e0b !important;
  --hope-colors-warning9: #f59e0b !important;
  --hope-colors-warning10: #fbbf24 !important;
  --hope-colors-warning11: #fbbf24 !important;
  --hope-colors-warning12: #fef3c7 !important;

  /* Success (Vercel Green) */
  --hope-colors-success3: rgba(16, 185, 129, 0.12) !important;
  --hope-colors-success8: #10b981 !important;
  --hope-colors-success9: #10b981 !important;
  --hope-colors-success10: #34d399 !important;
  --hope-colors-success11: #34d399 !important;
  --hope-colors-success12: #d1fae5 !important;

  /* Accent color mapping (Vercel Blue) */
  --hope-colors-accent1: #000000 !important;
  --hope-colors-accent2: #001633 !important;
  --hope-colors-accent3: #002b5c !important;
  --hope-colors-accent4: #00448f !important;
  --hope-colors-accent5: #005cc2 !important;
  --hope-colors-accent6: #0070f3 !important; /* Brand Blue */
  --hope-colors-accent7: #1f80f5 !important;
  --hope-colors-accent8: #3d91f7 !important;
  --hope-colors-accent9: #0070f3 !important;
  --hope-colors-accent10: #5ca1f9 !important;
  --hope-colors-accent11: #7ab2fa !important;
  --hope-colors-accent12: #ffffff !important;
}

/* Light theme design system colors */
body.hope-ui-light {
  --border-color: rgba(0, 0, 0, 0.08);
  --hover-bg: rgba(0, 0, 0, 0.025);
  --header-bg: rgba(255, 255, 255, 0.85);

  --hope-colors-background: #ffffff !important;
  --hope-colors-loContrast: #ffffff !important;

  /* Neutral colors (grayscale) */
  --hope-colors-neutral1: #ffffff !important;
  --hope-colors-neutral2: #fafafa !important; /* Panel background */
  --hope-colors-neutral3: #f3f3f3 !important; /* Row/button hover background */
  --hope-colors-neutral4: #eaeaea !important; /* Border color */
  --hope-colors-neutral5: #dddddd !important;
  --hope-colors-neutral6: #cccccc !important;
  --hope-colors-neutral7: #999999 !important;
  --hope-colors-neutral8: #888888 !important;
  --hope-colors-neutral9: #888888 !important; /* Muted secondary text */
  --hope-colors-neutral10: #333333 !important;
  --hope-colors-neutral11: #666666 !important; /* Secondary text */
  --hope-colors-neutral12: #000000 !important; /* Primary text */

  /* Primary color mapping (Monochrome Black highlight) */
  --hope-colors-primary1: #fafafa !important;
  --hope-colors-primary2: #f3f3f3 !important;
  --hope-colors-primary3: #eaeaea !important; /* Subtle button bg */
  --hope-colors-primary4: #dddddd !important;
  --hope-colors-primary5: #888888 !important;
  --hope-colors-primary6: #000000 !important;
  --hope-colors-primary7: #222222 !important;
  --hope-colors-primary8: #444444 !important;
  --hope-colors-primary9: #000000 !important;  /* Solid button bg */
  --hope-colors-primary10: #222222 !important; /* Solid button hover */
  --hope-colors-primary11: #000000 !important; /* Primary text / Subtle button text */
  --hope-colors-primary12: #ffffff !important; /* Solid button text */

  /* Danger (Vercel Red) */
  --hope-colors-danger3: #fee2e2 !important;
  --hope-colors-danger8: #ef4444 !important;
  --hope-colors-danger9: #ef4444 !important;
  --hope-colors-danger10: #dc2626 !important;
  --hope-colors-danger11: #dc2626 !important;
  --hope-colors-danger12: #7f1d1d !important;

  /* Warning (Vercel Amber) */
  --hope-colors-warning3: #fef3c7 !important;
  --hope-colors-warning8: #f59e0b !important;
  --hope-colors-warning9: #f59e0b !important;
  --hope-colors-warning10: #d97706 !important;
  --hope-colors-warning11: #d97706 !important;
  --hope-colors-warning12: #78350f !important;

  /* Success (Vercel Green) */
  --hope-colors-success3: #d1fae5 !important;
  --hope-colors-success8: #10b981 !important;
  --hope-colors-success9: #10b981 !important;
  --hope-colors-success10: #059669 !important;
  --hope-colors-success11: #059669 !important;
  --hope-colors-success12: #064e3b !important;

  /* Accent color mapping (Vercel Blue) */
  --hope-colors-accent1: #f3f8ff !important;
  --hope-colors-accent2: #e1f0ff !important;
  --hope-colors-accent3: #badeff !important;
  --hope-colors-accent4: #8ac3ff !important;
  --hope-colors-accent5: #50a4ff !important;
  --hope-colors-accent6: #0070f3 !important;
  --hope-colors-accent7: #0062d6 !important;
  --hope-colors-accent8: #0054b8 !important;
  --hope-colors-accent9: #0070f3 !important;
  --hope-colors-accent10: #004599 !important;
  --hope-colors-accent11: #00377a !important;
  --hope-colors-accent12: #ffffff !important;
}

/* Global resets for Vercel Minimalist style */
html, body {
  color: var(--hope-colors-neutral12) !important;
  font-family: var(--hope-fonts-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--hope-colors-background) !important;
}

/* Fix HTML canvas background-color dynamically to match the active theme */
html:has(body.hope-ui-dark) {
  background-color: #000000 !important;
}
html:has(body.hope-ui-light) {
  background-color: #ffffff !important;
}

/* Clear Soviet helper pseudo-elements */
body::before, body::after {
  content: none !important;
  display: none !important;
}

/* Clean, modern scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--hope-colors-neutral4);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--hope-colors-neutral6);
}

/* Clean flex layout for the page wrapper to eliminate artificial overflows */
#root {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* Minimalist Header styling */
.header {
  background-color: var(--header-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 14px 24px !important;
  box-shadow: none !important;
}
.header * {
  color: var(--hope-colors-neutral12) !important;
}
.header h2, .header h1, .header-left {
  font-family: var(--hope-fonts-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
/* Ensure logo matches the clean vibe */
.header .header-left img {
  filter: none !important;
  max-height: 28px !important;
}
body.hope-ui-dark .header .header-left img {
  filter: brightness(0) invert(1) !important;
}

/* Clean, subtle icon buttons in header (menu, logout, theme toggles) */
.hope-icon-button,
.header button.hope-menu__trigger,
.header button[aria-label],
button[aria-label="menu"],
button[aria-label="logout"] {
  background-color: transparent !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  color: var(--hope-colors-neutral12) !important;
  padding: 6px !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.hope-icon-button:hover,
.header button.hope-menu__trigger:hover,
.header button[aria-label]:hover,
button[aria-label="menu"]:hover,
button[aria-label="logout"]:hover {
  background-color: var(--hover-bg) !important;
  border-color: var(--hope-colors-neutral8) !important;
}
.hope-icon-button svg,
.header button.hope-menu__trigger svg,
.header button[aria-label] svg,
button[aria-label="menu"] svg,
button[aria-label="logout"] svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* Elegant Minimalist Breadcrumbs */
.hope-breadcrumb {
  background-color: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  margin-top: 16px !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
  letter-spacing: normal !important;
}
.hope-breadcrumb__item .nav-link,
.hope-breadcrumb__item span {
  color: var(--hope-colors-neutral11) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: color 0.15s ease;
}
.hope-breadcrumb__item .nav-link:hover {
  color: var(--hope-colors-neutral12) !important;
  text-decoration: none !important;
}
.hope-breadcrumb__separator {
  color: var(--hope-colors-neutral6) !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  margin: 0 6px !important;
}

/* Core Container Adjustment */
.body {
  padding: 16px 24px 40px 24px !important; /* Spacious bottom padding to separate from footer */
  max-width: 1200px;
  margin: 0 auto !important;
  min-height: unset !important;       /* Strip framework's hardcoded tall min-height */
  flex-grow: 1 !important;            /* Let body expand to push footer to bottom of viewport */
}
.obj-box {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* SLEEK LIST VIEW STYLING */
.list.viselect-container {
  border: 1px solid var(--border-color) !important;
  background-color: var(--hope-colors-neutral2) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
  padding: 0 0 var(--hope-space-1) 0 !important; /* Bottom padding to match table header gap symmetry */
  overflow: visible !important;       /* Let absolute footer count float outside without clipping */
  position: relative !important;
  margin-bottom: 48px !important;     /* Make room below table container for floating footer count */
}
body.hope-ui-dark .list.viselect-container {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
/* Table Header */
.list.viselect-container .title {
  background-color: var(--hope-colors-neutral2) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 12px 18px !important;
  color: var(--hope-colors-neutral11) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
  border-top-left-radius: 7px !important;
  border-top-right-radius: 7px !important;
}
.list.viselect-container .title p {
  color: var(--hope-colors-neutral11) !important;
  font-weight: 600 !important;
}
/* Table Row Items */
.list-item {
  background-color: transparent !important;
  border-bottom: none !important;
  padding: 12px 18px !important;
  color: var(--hope-colors-neutral12) !important;
  transition: background-color 0.1s ease !important;
  transform: none !important;
  display: flex !important;
  align-items: center;
  border-radius: 0px !important;
}
.list.viselect-container > div:last-of-type .list-item,
.list.viselect-container > div:nth-last-child(2) .list-item {
  border-bottom-left-radius: 7px !important;  /* Match container rounding when overflow: visible */
  border-bottom-right-radius: 7px !important; /* Match container rounding when overflow: visible */
}
.list-item:hover {
  background-color: var(--hope-colors-neutral3) !important;
  color: var(--hope-colors-neutral12) !important;
  transform: none !important;
}
.list-item:hover * {
  color: var(--hope-colors-neutral12) !important;
}
.list-item .icon {
  color: var(--hope-colors-neutral12) !important; /* Match text color exactly */
  font-size: 1.15rem !important;
  margin-right: 12px !important;
  transition: color 0.15s ease;
}
.list-item:hover .icon {
  color: var(--hope-colors-neutral12) !important;
  transform: none !important;
}
.list-item .name {
  font-weight: 500 !important;
  font-size: 0.9rem !important;
}
.list-item .size, .list-item .modified {
  font-size: 0.85rem !important;
  color: var(--hope-colors-neutral11) !important;
}

/* File List Footer Count (e.g. "共有 8 个文件夹") - Floating style */
.list.viselect-container > p,
.list.viselect-container > .hope-text {
  position: absolute !important;
  bottom: -38px !important;           /* Push exactly below the border box with a larger gap */
  left: 0 !important;
  right: 0 !important;
  color: var(--hope-colors-neutral9) !important; /* Soft muted gray */
  font-family: var(--hope-fonts-sans) !important;
  font-size: 0.75rem !important;      /* Subtle 12px font */
  font-weight: 500 !important;
  text-align: center !important;
  background: transparent !important; /* No solid bar background */
  border: none !important;            /* No border lines */
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  display: block !important;
  letter-spacing: 0.03em !important;
  pointer-events: none !important;
}

/* SLEEK GRID VIEW STYLING */
.viselect-container.hope-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 16px !important;
  padding: 8px 0 !important;
}
.grid-item {
  background-color: var(--hope-colors-neutral2) !important;
  border: 1px solid var(--border-color) !important;
  padding: 24px 16px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
  transform: none !important;
  height: 100% !important;
}
body.hope-ui-dark .grid-item {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
.grid-item:hover {
  background-color: var(--hope-colors-neutral3) !important;
  border-color: var(--hope-colors-neutral8) !important;
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}
body.hope-ui-dark .grid-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
.grid-item:hover * {
  color: var(--hope-colors-neutral12) !important;
}
.grid-item .item-thumbnail {
  font-size: 2.2rem !important;
  color: var(--hope-colors-neutral12) !important; /* Match text color exactly */
  margin-bottom: 12px !important;
}
.grid-item:hover .item-thumbnail {
  color: var(--hope-colors-neutral12) !important;
  transform: none !important;
}
.grid-item .hope-text {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--hope-colors-neutral12) !important;
  line-height: 1.4 !important;
}

/* Grid View Summary Count (if present) */
.viselect-container.hope-grid + p,
.viselect-container.hope-grid > p,
.viselect-container.hope-grid > .hope-text {
  color: var(--hope-colors-neutral9) !important;
  font-family: var(--hope-fonts-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  padding: 16px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
  letter-spacing: 0.03em !important;
}

/* Force folder/file SVG colors to inherit currentColor and scale to 0.9 */
.grid-item .item-thumbnail svg,
.list-item svg.icon,
.list-item .icon {
  color: inherit !important;
  fill: currentColor !important;
  scale: 0.9 !important;              /* Retain only the modern scale property to prevent double-scaling */
  transform-origin: center !important;
}

/* GENERAL BUTTON STYLING */
.hope-button {
  border-radius: 6px !important;
  font-family: var(--hope-fonts-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  transform: none !important;
}
.hope-button:active {
  transform: none !important;
}

/* FORM CONTROLS - Inputs, Textareas, Selects */
.hope-input,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select,
.hope-select__trigger {
  background-color: var(--hope-colors-neutral2) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  color: var(--hope-colors-neutral12) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  box-shadow: none !important;
  font-family: var(--hope-fonts-sans) !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
.hope-input:focus,
input:focus,
textarea:focus,
select:focus,
.hope-select__trigger[aria-expanded="true"] {
  border-color: var(--hope-colors-accent6) !important;
  outline: none !important;
  box-shadow: 0px 0px 0px 3px rgba(0, 112, 243, 0.15) !important;
}

/* Labels */
.hope-form-control__label {
  font-family: var(--hope-fonts-sans) !important;
  text-transform: none !important;
  font-size: 0.875rem !important;
  letter-spacing: normal !important;
  font-weight: 500 !important;
  color: var(--hope-colors-neutral11) !important;
  margin-bottom: 8px !important;
}

/* BADGES & CHIPS */
.hope-badge {
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  text-transform: none !important;
  font-weight: 500 !important;
  background-color: var(--hope-colors-neutral3) !important;
  color: var(--hope-colors-neutral11) !important;
  padding: 2px 8px !important;
  font-size: 0.75rem !important;
  letter-spacing: normal !important;
}

/* FLOATING TOOLBAR (Bottom-Right Action Menu) */

/* Case 1: When collapsed (DOES NOT contain expanded .left-toolbar) */
.left-toolbar-box:not(:has(.left-toolbar)) {
  background-color: var(--hope-colors-neutral3) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  border-radius: 50% !important;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.1s ease !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important;
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
}
body.hope-ui-dark .left-toolbar-box:not(:has(.left-toolbar)) {
  box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}
.left-toolbar-box:not(:has(.left-toolbar)):hover {
  background-color: var(--hope-colors-neutral4) !important;
  border-color: var(--hope-colors-neutral8) !important;
  transform: scale(1.05) !important;
}
.left-toolbar-box:not(:has(.left-toolbar)) svg {
  color: var(--hope-colors-neutral12) !important;
  font-size: 1.4rem !important;
}

/* Case 2: When open (contains expanded .left-toolbar) */
.left-toolbar-box:has(.left-toolbar) {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 44px !important;
  height: auto !important; /* Let height adapt to expanded toolbar */
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  overflow: visible !important;
  z-index: 1000 !important;
  display: block !important;
}

/* The open toolbar vertical pill container */
.left-toolbar-box .left-toolbar {
  background-color: var(--hope-colors-neutral3) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 24px !important; /* Perfect vertical pill rounded shape */
  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
  padding: 8px 0 !important;
  position: absolute !important;
  bottom: 0 !important; /* Start all the way at the bottom of the wrapper */
  right: -2px !important;  /* Center the 48px pill over the 44px trigger */
  width: 48px !important;  /* Slightly wider layout for more breathing room */
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 1001 !important;
}
body.hope-ui-dark .left-toolbar-box .left-toolbar {
  background-color: #1f1f1f !important; /* Slightly lighter charcoal for contrast against black */
  box-shadow: 0 10px 40px rgba(0,0,0,0.65) !important;
}

/* Inner action list layout */
.left-toolbar-box .left-toolbar-in {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  align-items: center !important;
}

/* Action icons inside the expanded pill */
.left-toolbar-box .left-toolbar svg,
.left-toolbar-box .left-toolbar .hope-icon {
  color: var(--hope-colors-neutral11) !important;
  width: 32px !important;
  height: 32px !important;
  padding: 6px !important;
  border-radius: 50% !important; /* Perfect circle hover highlights */
  cursor: pointer !important;
  transition: background-color 0.1s ease, color 0.1s ease, transform 0.1s ease !important;
  background-color: transparent !important;
  display: block !important;
}
.left-toolbar-box .left-toolbar svg:hover,
.left-toolbar-box .left-toolbar .hope-icon:hover {
  background-color: var(--hover-bg) !important;
  color: var(--hope-colors-neutral12) !important;
  transform: scale(1.08) !important;
}

/* Highlight the close button SVG inside the pill */
.left-toolbar-box .left-toolbar > svg[tips="more"] {
  color: var(--hope-colors-neutral12) !important;
  margin-top: 4px !important;
}

/* DIRECTORY SIDEBAR & FOLDER TREE */
div:has(> .folder-tree-box) {
  background-color: var(--hope-colors-neutral2) !important;
  border-right: 1px solid var(--border-color) !important;
  padding: 16px 12px !important;
  box-shadow: none !important;
}

.folder-tree-box {
  background-color: transparent !important;
}

/* Tree node clickable row container */
.folder-tree-box div:has(> p.hope-text) {
  padding: 6px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background-color 0.1s ease, color 0.1s ease !important;
  margin: 3px 0 !important;
  display: flex !important;
  align-items: center !important;
  background-color: transparent !important;
  border: none !important;
}

/* Tree node row hover highlight */
.folder-tree-box div:has(> p.hope-text):hover {
  background-color: var(--hover-bg) !important;
}

/* Tree node folder name text */
.folder-tree-box p.hope-text {
  font-family: var(--hope-fonts-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--hope-colors-neutral11) !important;
  transition: color 0.1s ease !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.folder-tree-box div:has(> p.hope-text):hover p.hope-text {
  color: var(--hope-colors-neutral12) !important;
}

/* Tree arrow icons (triangles) */
.folder-tree-box svg,
.folder-tree-box .hope-icon {
  color: var(--hope-colors-neutral8) !important; /* Muted gray arrow instead of raw blue */
  margin-right: 8px !important;
  font-size: 0.75rem !important;
  transition: color 0.1s ease, transform 0.15s ease !important;
}
.folder-tree-box div:has(> p.hope-text):hover svg,
.folder-tree-box div:has(> p.hope-text):hover .hope-icon {
  color: var(--hope-colors-neutral12) !important;
}

/* MODALS & OVERLAYS */
.hope-modal__content {
  background-color: var(--hope-colors-neutral2) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
}
body.hope-ui-dark .hope-modal__content {
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5) !important;
}
.hope-modal__header {
  background-color: var(--hope-colors-neutral2) !important;
  color: var(--hope-colors-neutral12) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 16px 20px !important;
  font-family: var(--hope-fonts-sans) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
.hope-modal__header * {
  color: var(--hope-colors-neutral12) !important;
}
.hope-modal__body {
  padding: 20px !important;
}
.hope-modal__footer {
  padding: 14px 20px !important;
  border-top: 1px solid var(--border-color) !important;
  background-color: var(--hope-colors-neutral1) !important;
}
.hope-modal__close-button {
  color: var(--hope-colors-neutral11) !important;
  background: transparent !important;
  border-radius: 6px !important;
}
.hope-modal__close-button:hover {
  background-color: var(--hope-colors-neutral3) !important;
  color: var(--hope-colors-neutral12) !important;
}
.hope-overlay {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
body.hope-ui-dark .hope-overlay {
  background-color: rgba(0, 0, 0, 0.75) !important;
}

/* POPUP MENUS & CUSTOM OPTIONS */
.hope-menu__content, .hope-select__content {
  background-color: var(--hope-colors-neutral2) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
  border-radius: 8px !important;
  padding: 4px !important;
}
body.hope-ui-dark .hope-menu__content,
body.hope-ui-dark .hope-select__content {
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}
.hope-menu__item, .hope-select__option {
  height: auto !important;            /* Force auto height to prevent library's giant 50px default */
  min-height: unset !important;       /* Clear any min-height constraints */
  padding: 5px 10px !important;       /* Highly compact padding! */
  border-bottom: none !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  color: var(--hope-colors-neutral11) !important;
  border-radius: 6px !important;
  transition: all 0.15s ease;
  margin: 1px 2px !important;         /* Tight margin */
}
/* Style inner dropdown select spans to allow compact height */
.hope-select__option-text {
  height: auto !important;
  min-height: unset !important;
  padding: 0 !important;
}
.hope-select__option-indicator {
  height: auto !important;
  min-height: unset !important;
  padding: 0 !important;
  padding-right: 8px !important;      /* Pull checkmark away from the right border */
  margin-left: auto !important;        /* Ensure it aligns to the right side */
}
.hope-menu__item:hover,
.hope-menu__item[data-active="true"],
.hope-select__option:hover,
.hope-select__option[data-active="true"],
.hope-select__option[aria-selected="true"] {
  background-color: var(--hope-colors-neutral3) !important;
  color: var(--hope-colors-neutral12) !important;
}
.hope-menu__item:hover svg,
.hope-menu__item[data-active="true"] svg {
  color: var(--hope-colors-neutral12) !important;
}

/* CUSTOM CONTEXT MENUS (solid-contextmenu) */
.solid-contextmenu {
  background-color: var(--hope-colors-neutral2) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  padding: 4px !important;
  min-width: 140px !important;         /* Compact narrower width */
  width: auto !important;
}
body.hope-ui-light .solid-contextmenu {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}
.solid-contextmenu__item {
  color: var(--hope-colors-neutral11) !important;
  font-family: var(--hope-fonts-sans) !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;       /* Highly compact padding! */
  margin: 1px 2px !important;         /* Tight margin */
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important; /* Smooth fade hover */
}
.solid-contextmenu__item:hover {
  background-color: var(--hope-colors-neutral3) !important;
  color: var(--hope-colors-neutral12) !important;
}
.solid-contextmenu__item__content {
  height: auto !important;            /* Strip library default 40px container height */
  padding: 0 !important;              /* Strip library default padding */
  background: transparent !important;
  transition: none !important;
}
.solid-contextmenu__item svg {
  color: inherit !important;          /* Inherit color from parent item directly */
  scale: 0.9 !important;              /* Apply 0.9 scale */
  transform-origin: center !important;
  font-size: 1rem !important;
  transition: color 0.15s ease, scale 0.15s ease !important;
}
.solid-contextmenu__item:hover svg {
  color: var(--hope-colors-neutral12) !important;
}
.solid-contextmenu__separator {
  height: 1px !important;
  background-color: var(--border-color) !important;
  margin: 4px 0 !important;
}

/* CUSTOM SWITCH SWITCHES (Toggle Buttons) */
.hope-switch {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
}
.hope-switch__label {
  font-family: var(--hope-fonts-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--hope-colors-neutral11) !important;
  margin-right: 8px !important;
}
.hope-switch__control {
  background-color: var(--hope-colors-neutral4) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 9999px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.hope-switch__control[data-checked] {
  background-color: var(--hope-colors-accent6) !important; /* Vercel Brand Blue on active */
  border-color: var(--hope-colors-accent6) !important;
}

/* EXTERNAL PLAYER BUTTONS TOOLBAR */
.hope-flex:has(> a[href*="vlc"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 24px !important;
  padding: 12px !important;
  background-color: var(--hope-colors-neutral2) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
}
/* Individual player cards */
.hope-flex:has(> a[href*="vlc"]) a,
.hope-flex:has(> a[href*="vlc"]) button {
  width: 42px !important;
  height: 42px !important;
  padding: 8px !important;
  background-color: var(--hope-colors-neutral1) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, scale 0.1s ease !important;
  scale: 1 !important;
  text-decoration: none !important;
}
.hope-flex:has(> a[href*="vlc"]) a:hover,
.hope-flex:has(> a[href*="vlc"]) button:hover {
  background-color: var(--hope-colors-neutral3) !important;
  border-color: var(--hope-colors-neutral8) !important;
  scale: 1.05 !important;
}
.hope-flex:has(> a[href*="vlc"]) a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.hope-flex:has(> a[href*="vlc"]) button svg {
  font-size: 1.1rem !important;
  color: var(--hope-colors-neutral12) !important;
}

/* MANAGEMENT SIDEBAR & LAYOUT */
aside,
[role="navigation"].hope-stack,
.hope-c-PJLV-ijrehjy-css,
div:has(> div > .hope-anchor:not(.footer *)) {
  background-color: var(--hope-colors-neutral2) !important;
  border-right: 1px solid var(--border-color) !important;
  color: var(--hope-colors-neutral12) !important;
  box-shadow: none !important;
}

/* Sidebar navigation links */
aside a,
[role="navigation"].hope-stack a,
.hope-anchor:not(.footer *) {
  color: var(--hope-colors-neutral11) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-radius: 6px !important;
  border-bottom: none !important;
  transition: all 0.12s ease !important;
  padding: 8px 14px !important;
  margin: 3px 10px !important;
  display: flex !important;
  align-items: center;
  text-decoration: none;
}
aside a:hover,
[role="navigation"].hope-stack a:hover,
.hope-anchor:not(.footer *):hover {
  background-color: var(--hover-bg) !important;
  color: var(--hope-colors-neutral12) !important;
}

/* Active sidebar link highlight */
aside a.active,
[role="navigation"].hope-stack a[data-active="true"],
[role="navigation"].hope-stack a.active,
.hope-anchor:not(.footer *).active,
.hope-anchor:not(.footer *)[data-active="true"] {
  background-color: var(--hope-colors-neutral3) !important;
  color: var(--hope-colors-neutral12) !important;
  font-weight: 600 !important;
  border-left: none !important;
}

/* Dark theme header adjustments in management */
header.hope-c-PJLV-ibpoBZc-css {
  background-color: var(--hope-colors-background) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
header.hope-c-PJLV-ibpoBZc-css * {
  color: var(--hope-colors-neutral12) !important;
}

/* Storage detail cards */
.hope-grid > .hope-stack,
.hope-grid > div:has(.hope-button) {
  background-color: var(--hope-colors-neutral2) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.01) !important;
}

/* CLEAN MINIMAL FOOTER */
.footer {
  margin-top: auto !important;         /* Always push footer to bottom of page when content is short */
  background-color: var(--hope-colors-background) !important;
  color: var(--hope-colors-neutral11) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 24px 16px !important;
  text-align: center;
  box-shadow: none !important;
}
.footer .hope-stack,
.footer div {
  justify-content: center !important;
  align-items: center !important;
}
.footer a {
  color: var(--hope-colors-neutral12) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-family: var(--hope-fonts-sans) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.footer a:hover {
  color: var(--hope-colors-accent6) !important;
  text-decoration: underline !important;
}
.footer span {
  color: var(--border-color) !important;
  margin: 0 10px !important;
}

/* ==========================================
   VIDEO PLAYBACK PAGE STYLING (Vercel Style)
   ========================================== */

/* Top Player Selector (above the video) */
.obj-box > .hope-stack > .hope-stack:first-child > .hope-select__trigger {
  width: auto !important;
  min-width: 220px !important;
  max-width: 320px !important;
  align-self: flex-start !important;
  margin-bottom: 16px !important;
}

/* Remove background and border from the video parent container box */
.hope-stack:has(> #video-player) {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Video Player Box wrapper */
#video-player {
  background-color: #000000 !important; /* Always pure black background for video backdrop */
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25) !important;
  flex-shrink: 0 !important;           /* Prevent player height from being crushed in flex viewports */
}
body.hope-ui-light #video-player {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06) !important;
}

/* ArtPlayer customization to match design system */
.art-video-player,
.art-video-player * {
  font-family: var(--hope-fonts-sans) !important;
}
.art-video-player {
  --art-theme: var(--hope-colors-primary9) !important; /* Slick white/black accent color */
}

/* Video Controls Row (File Name Select & Autoplay Switch) */
.hope-stack:has(> #video-player) > .hope-stack {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: 16px !important;
  margin-bottom: 24px !important;
  gap: 16px !important;
}

/* Make bottom selector width auto and compact */
.hope-stack:has(> #video-player) > .hope-stack > .hope-select__trigger {
  width: auto !important;
  min-width: 240px !important;
  max-width: 70% !important;
  align-self: center !important;
}

/* Switch element adjustments */
.hope-stack:has(> #video-player) > .hope-stack > .hope-switch {
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* Tighten spacing specifically on video playback page to fit everything on one screen */
.body:has(#video-player) > .hope-breadcrumb {
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}
.obj-box > .hope-stack > .hope-stack:first-child > .hope-select__trigger {
  margin-bottom: 10px !important; /* Reduced from 16px */
}
.hope-stack:has(> #video-player) {
  gap: 12px !important; /* Reduce inner flex gaps inside player stack */
}
.hope-stack:has(> #video-player) > .hope-stack {
  margin-top: 10px !important; /* Reduced from 16px */
  margin-bottom: 14px !important; /* Reduced from 24px */
}
.hope-flex:has(> a[href*="vlc"]) {
  margin-top: 14px !important; /* Reduced from 24px */
  padding: 10px !important;     /* Slightly tighter padding */
}
.body:has(#video-player) {
  padding-bottom: 20px !important; /* Reduced from 40px to fit screen */
}
#root:has(#video-player) .footer {
  padding: 16px 16px !important; /* Reduced from 24px to fit screen */
}

/* MOBILE ADAPTABILITY */
@media (max-width: 768px) {
  /* Mobile Video Controls */
  .hope-stack:has(> #video-player) > .hope-stack {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .hope-stack:has(> #video-player) > .hope-stack > .hope-select__trigger {
    width: 100% !important;
    max-width: 100% !important;
  }

  .body {
    padding: 12px 16px !important;
  }
  .hope-breadcrumb {
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }
  .list.viselect-container .title {
    padding: 10px 14px !important;
  }
  .list-item {
    padding: 10px 14px !important;
  }
  .viselect-container.hope-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 12px !important;
  }
  .grid-item {
    padding: 16px 12px !important;
  }
  .grid-item .item-thumbnail {
    font-size: 2rem !important;
    margin-bottom: 8px !important;
  }
  .grid-item .hope-text {
    font-size: 0.8rem !important;
  }
  aside,
  .hope-c-PJLV-ijrehjy-css {
    border-right: none !important;
    border-bottom: 1px solid var(--border-color) !important;
  }
}