/* ============================================================
   Mac Drive Theme for HFS 3
   Google Drive / macOS Finder aesthetic
   Supports both Light and Dark modes
   ============================================================ */

/* ----- Custom Properties (Light Mode) ----- */
:root {
  --mac-bg-canvas: #f3f4f6;
  --mac-bg-content: #ffffff;
  --mac-bg-header: rgba(255, 255, 255, 0.72);
  --mac-bg-hover: #f0f1f3;
  --mac-text-primary: #1d1d1f;
  --mac-text-secondary: #86868b;
  --mac-border: #d2d2d7;
  --mac-accent: #0071e3;
  --mac-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --mac-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --mac-radius: 10px;
  --mac-radius-sm: 8px;

  /* Override HFS native variables */
  --bg: #f3f4f6 !important;
  --text: #3a3a3c !important;
  --text-high-contrast: #1d1d1f !important;
  --link: #0071e3 !important;
  --ghost-contrast: rgba(0, 0, 0, 0.02) !important;
  --ghost-contrast-alt: #f5f5f7 !important;
  --faint-contrast: #e5e5ea !important;
  --mild-contrast: #c7c7cc !important;
  --good-contrast: #48484a !important;
  --button-bg: #0071e3 !important;
  --button-text: #ffffff !important;
  --focus-color: #0071e3 !important;
}

/* ----- Dark Mode ----- */
:root .theme-dark {
  --mac-bg-canvas: #1c1c1e;
  --mac-bg-content: #2c2c2e;
  --mac-bg-header: rgba(28, 28, 30, 0.72);
  --mac-bg-hover: #3a3a3c;
  --mac-text-primary: #f5f5f7;
  --mac-text-secondary: #86868b;
  --mac-border: #3a3a3c;
  --mac-accent: #2997ff;
  --mac-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --mac-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);

  /* Override HFS native variables (dark) */
  --bg: #1c1c1e !important;
  --text: #aeaeb2 !important;
  --text-high-contrast: #f5f5f7 !important;
  --link: #2997ff !important;
  --ghost-contrast: rgba(255, 255, 255, 0.03) !important;
  --ghost-contrast-alt: #2c2c2e !important;
  --faint-contrast: #3a3a3c !important;
  --mild-contrast: #636366 !important;
  --good-contrast: #d1d1d6 !important;
  --button-bg: #2997ff !important;
  --button-text: #ffffff !important;
  --focus-color: #2997ff !important;
}


/* ===========================================================
   1. GLOBAL TYPOGRAPHY & BACKGROUND
   =========================================================== */

body {
  background-color: var(--mac-bg-canvas) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--mac-text-primary) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}


/* ===========================================================
   2. FROSTED GLASS HEADER
   =========================================================== */

#root header {
  background-color: var(--mac-bg-header) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 0.5px solid var(--mac-border) !important;
  padding: 10px 16px !important;
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.05) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}


/* ===========================================================
   3. TOOLBAR BUTTONS — pill-shaped macOS style
   =========================================================== */

#menu-bar button,
#menu-bar a > button {
  background-color: transparent !important;
  color: var(--mac-accent) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 11pt !important;
  font-weight: 500 !important;
  transition: background-color 0.15s ease !important;
}

#menu-bar button:hover,
#menu-bar a > button:hover {
  background-color: var(--mac-bg-hover) !important;
  outline: none !important;
}

#menu-bar button[disabled],
#menu-bar a > button[disabled] {
  color: var(--mac-text-secondary) !important;
  opacity: 0.5 !important;
}


/* ===========================================================
   4. BREADCRUMBS — rounded chips
   =========================================================== */

.breadcrumb {
  background-color: var(--mac-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 10pt !important;
  font-weight: 500 !important;
}

.breadcrumb:hover {
  filter: brightness(1.1) !important;
}


/* ===========================================================
   5. LIST WRAPPER — constrain width, add padding
   =========================================================== */

.list-wrapper {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

.list-wrapper.tiles-mode {
  max-width: none !important;
  padding: 0 24px !important;
}


/* ===========================================================
   6. TILES MODE — Google Drive card grid
   =========================================================== */

/* Grid layout */
.tiles-mode ul.dir {
  gap: 16px !important;
  padding: 8px 0 !important;
}

/* Individual tile cards */
.tiles-mode ul.dir li {
  background-color: var(--mac-bg-content) !important;
  border: 1px solid var(--mac-border) !important;
  border-radius: var(--mac-radius) !important;
  box-shadow: var(--mac-card-shadow) !important;
  padding: 12px 8px 8px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.15s ease !important;
  overflow: hidden !important;
}

.tiles-mode ul.dir li:hover {
  box-shadow: var(--mac-card-shadow-hover) !important;
  transform: translateY(-1px) !important;
  background-color: var(--mac-bg-content) !important;
}

/* Remove the alternating row highlight in tiles */
.tiles-mode ul.dir li:nth-of-type(odd) {
  background-color: var(--mac-bg-content) !important;
}

/* Folder icon color inside tiles */
.tiles-mode ul.dir li .fa-folder:before,
ul.dir li .fa-folder:before {
  color: #5ab0ff !important;
}


/* ===========================================================
   7. LIST MODE — clean rows with subtle dividers
   =========================================================== */

ul.dir li {
  border-bottom: 1px solid var(--mac-border) !important;
  padding: 10px 12px !important;
  transition: background-color 0.15s ease !important;
}

ul.dir li:nth-of-type(odd) {
  background-color: transparent !important;
}

ul.dir li:hover {
  background-color: var(--mac-bg-hover) !important;
}

ul.dir li .link-wrapper a {
  color: var(--mac-text-primary) !important;
}

ul.dir li .link-wrapper a:hover {
  color: var(--mac-accent) !important;
  text-decoration: none !important;
}

/* Entry details (size, date) */
ul.dir li .entry-panel .entry-details {
  color: var(--mac-text-secondary) !important;
  font-size: 85% !important;
}


/* ===========================================================
   8. FILTER BAR
   =========================================================== */

#filter {
  background-color: var(--mac-bg-content) !important;
  border: 1px solid var(--mac-border) !important;
  border-radius: var(--mac-radius-sm) !important;
  padding: 6px 12px !important;
  color: var(--mac-text-primary) !important;
  font-size: 10pt !important;
}

#filter:focus {
  border-color: var(--mac-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;
}


/* ===========================================================
   9. FOLDER STATS
   =========================================================== */

#folder-stats {
  color: var(--mac-text-secondary) !important;
  font-size: 85% !important;
  font-weight: 400 !important;
}


/* ===========================================================
   10. DIALOGS — rounded, frosted glass
   =========================================================== */

#root .dialog-backdrop {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.dialog {
  background-color: var(--mac-bg-content) !important;
  border: 1px solid var(--mac-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15) !important;
  padding: 16px !important;
}

.dialog-title {
  font-weight: 600 !important;
  font-size: 115% !important;
  color: var(--mac-text-primary) !important;
}

.dialog-icon {
  border-radius: 10px 0 !important;
  background-color: var(--mac-accent) !important;
}

.dialog-closer {
  background-color: #ff5f57 !important;
  border-radius: 0 10px !important;
}

.dialog-closer:hover {
  filter: brightness(1.1) !important;
}


/* ===========================================================
   11. FILE MENU (right-click / popup)
   =========================================================== */

.file-menu a {
  color: var(--mac-text-primary) !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  transition: background-color 0.15s ease !important;
}

.file-menu a:hover {
  background-color: var(--mac-accent) !important;
  color: #fff !important;
}

.popup-menu-button {
  background-color: var(--mac-bg-content) !important;
  border: 1px solid var(--mac-border) !important;
  border-radius: 6px !important;
  color: var(--mac-text-secondary) !important;
  font-size: 9pt !important;
}

.popup-menu-button:hover {
  background-color: var(--mac-bg-hover) !important;
  color: var(--mac-text-primary) !important;
}


/* ===========================================================
   12. PAGING BAR
   =========================================================== */

#paging {
  background-color: var(--mac-bg-canvas) !important;
}

#paging button {
  background-color: var(--mac-accent) !important;
  color: #fff !important;
  border-radius: var(--mac-radius-sm) !important;
  box-shadow: var(--mac-card-shadow) !important;
  font-weight: 500 !important;
}


/* ===========================================================
   13. TOASTS — modern notification pills
   =========================================================== */

.toast {
  border-radius: var(--mac-radius) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  font-weight: 500 !important;
}


/* ===========================================================
   14. FILE SHOW (media viewer overlay)
   =========================================================== */

#root .file-show {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

#root .file-show .bar {
  background-color: var(--mac-bg-header) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-radius: var(--mac-radius-sm) !important;
}


/* ===========================================================
   15. SCROLLBAR (webkit browsers)
   =========================================================== */

@media (min-width: 42em) {
  body {
    scrollbar-width: thin !important;
    scrollbar-color: var(--mac-border) transparent !important;
  }

  body::-webkit-scrollbar {
    width: 8px !important;
  }

  body::-webkit-scrollbar-track {
    background: transparent !important;
  }

  body::-webkit-scrollbar-thumb {
    background-color: var(--mac-border) !important;
    border-radius: 4px !important;
    border: 2px solid transparent !important;
    background-clip: content-box !important;
  }
}


/* ===========================================================
   16. UPLOAD TOOLBAR
   =========================================================== */

.upload-toolbar {
  background-color: var(--mac-bg-canvas) !important;
  box-shadow: 0 0 6px 6px var(--mac-bg-canvas) !important;
}


/* ===========================================================
   17. INPUTS & SELECTS
   =========================================================== */

input:not([type=checkbox]):not([type=range]),
select,
textarea {
  background-color: var(--mac-bg-content) !important;
  border: 1px solid var(--mac-border) !important;
  border-radius: var(--mac-radius-sm) !important;
  color: var(--mac-text-primary) !important;
  padding: 6px 10px !important;
}

input:not([type=checkbox]):not([type=range]):focus,
select:focus,
textarea:focus {
  border-color: var(--mac-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;
}

.theme-dark input:not([type=checkbox]):not([type=range]):focus,
.theme-dark select:focus,
.theme-dark textarea:focus {
  box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.25) !important;
}


/* ===========================================================
   18. SELECTION CHECKBOX
   =========================================================== */

input[type=checkbox] {
  accent-color: var(--mac-accent) !important;
}


/* ===========================================================
   19. MOBILE ADJUSTMENTS
   =========================================================== */

@media (max-width: 42em) {
  .list-wrapper.tiles-mode {
    padding: 0 8px !important;
  }

  .tiles-mode ul.dir {
    gap: 10px !important;
  }

  #menu-bar button {
    padding: 6px 4px !important;
  }
}