/* FileRun dark glass + subtle Pi-hole-ish dust */

:root {
  --fr-base: #07090b;
  --fr-panel: rgba(18, 21, 24, 0.74);
  --fr-panel-solid: rgba(15, 18, 21, 0.88);
  --fr-main: rgba(255,255,255,0.026);
  --fr-border: rgba(255,255,255,0.060);
  --fr-radius: 18px;
}

/* Base page */
html,
body {
  background: var(--fr-base) !important;
}

/* Full-page dust layer only. No fake static side panels. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;

  background-image: url("/customizables/pihole-dust.svg?v=4");
  background-repeat: repeat;
  background-size: 420px 420px;

  opacity: 0.34;
  mix-blend-mode: screen;
}

/* Kill the old fake panels if browser cached any prior version */
body::before,
body::after {
  content: none !important;
  display: none !important;
}

/* Actual FileRun side panels / menus */
nav,
aside,
[role="navigation"],
[role="complementary"] {
  background: var(--fr-panel) !important;
  border: 1px solid var(--fr-border) !important;
  border-radius: var(--fr-radius) !important;
  margin: 10px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Actual center/main content area */
main,
[role="main"] {
  background: var(--fr-main) !important;
  border: 1px solid var(--fr-border) !important;
  border-radius: var(--fr-radius) !important;
  margin: 10px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Keep left menu selected items from spilling over the rounded panel */
nav *,
aside *,
[role="navigation"] *,
[role="complementary"] * {
  box-sizing: border-box !important;
}

nav a,
nav button,
aside a,
aside button,
[role="navigation"] a,
[role="navigation"] button {
  max-width: calc(100% - 14px) !important;
  margin-left: 7px !important;
  margin-right: 7px !important;
  border-radius: 999px !important;
}

/* Folder/category cards */
button,
[role="button"] {
  border-radius: 12px !important;
}

/* Softer borders on form-ish stuff */
input,
textarea,
select {
  background-color: var(--fr-panel-solid) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Top view-mode buttons: add breathing room between icons */
.MuiToggleButtonGroup-root,
.MuiButtonGroup-root {
  gap: 6px !important;
}

/* Keep grouped toolbar buttons individually rounded instead of kissing */
.MuiToggleButtonGroup-root .MuiToggleButton-root,
.MuiToggleButtonGroup-root .MuiButtonBase-root,
.MuiButtonGroup-root .MuiButtonBase-root {
  margin-left: 0 !important;
  border-radius: 8px !important;
  border-left: 1px solid rgba(255,255,255,0.13) !important;
}

/* Slightly clean up the selected view button */
.MuiToggleButtonGroup-root .Mui-selected,
.MuiButtonGroup-root .Mui-selected,
.MuiToggleButtonGroup-root [aria-pressed="true"],
.MuiButtonGroup-root [aria-pressed="true"] {
  border-radius: 8px !important;
}

/* View mode buttons: stop the little pill buttons from kissing */
#viewRocker {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Direct button spacing inside the view switcher */
#viewRocker > button.fr-btn.x-pill,
#viewRocker > button.x-pill,
#viewRocker > button {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 8px !important;
  min-width: 28px !important;
}

/* Extra insurance in case FileRun collapses borders with negative margin */
#viewRocker > button + button {
  margin-left: 5px !important;
}

/* Keep selected blue button clean after separating */
#viewRocker > button.btn-highlight {
  border-radius: 8px !important;
}

/* FINAL view-mode rocker polish: separated clean pills */
#viewRocker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px !important;
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  overflow: visible !important;
}

/* Kill FileRun's segmented-border weirdness */
#viewRocker > button,
#viewRocker > button.fr-btn,
#viewRocker > button.x-pill,
#viewRocker > button.fr-btn.x-pill {
  width: 24px !important;
  min-width: 24px !important;
  height: 22px !important;
  min-height: 22px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;

  border-radius: 999px !important;
  background: rgba(255,255,255,0.055) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
}

/* Selected/active blue pill */
#viewRocker > button.btn-highlight,
#viewRocker > button[aria-pressed="true"] {
  background: #0070b8 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16) !important;
  border-radius: 999px !important;
}

/* Prevent old margin rule from reintroducing spacing bugs */
#viewRocker > button + button {
  margin-left: 0 !important;
}