/* Black & white theme for File Browser - forced */
:root {
  --background:       #ffffff !important;
  --surfacePrimary:   #ffffff !important;
  --surfaceSecondary: #f4f4f4 !important;
  --divider:          rgba(0, 0, 0, 0.22) !important;
  --icon:             #000000 !important;
  --textPrimary:      #000000 !important;
  --textSecondary:    rgba(0, 0, 0, 0.55) !important;
  --blue:             #000000 !important;
  --dark-blue:        #000000 !important;
  --red:              #000000 !important;
}

/* sidebar: force all text + icons black so they're visible on white */
nav, nav *,
.sidebar, .sidebar * {
  color: #000000 !important;
}

/* folder/file cards: visible borders */
#listing .item {
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  background: #ffffff !important;
}

/* login page card + inputs: visible borders */
.card,
form.card,
input,
.input,
.input--block {
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
}

/* blue folder icons -> black */
#listing .item[data-dir="true"] i,
#listing .item[data-dir="true"] .material-icons {
  color: #000000 !important;
}

/* login title: shrink so the first two words fit on one line */
.login h1,
body.login h1,
.card h1 {
  font-size: 1.4rem !important;
  line-height: 1.3 !important;
}

/* login title - correct selector is #login h1 */
#login h1 {
  font-size: 1.6rem !important;
  line-height: 1.3 !important;
}

/* login title - correct selector is #login h1 */
#login h1 {
  font-size: 1.8rem !important;
  line-height: 1.3 !important;
}

/* login title - black + resized */
#login h1 {
  font-size: 1.10rem !important;
  line-height: 1.3 !important;
  color: #000000 !important;
}

/* login title - bigger + black */
#login h1 {
  font-size: 1.9rem !important;
  line-height: 1.3 !important;
  color: #000000 !important;
}

/* selected folder: white icon so it shows on the black highlight */
#listing .item[data-dir="true"][aria-selected="true"] i,
#listing .item[data-dir="true"][aria-selected="true"] .material-icons,
#listing .item[data-dir="true"].active i,
#listing .item[data-dir="true"].active .material-icons {
  color: #ffffff !important;
}

/* top action-bar icons -> black so they show on the white header */
header i,
header button i,
header .action i,
header .material-icons {
  color: #000000 !important;
}

/* settings tabs (links inside div#nav) -> black so all tabs are visible */
#nav a,
#nav a li {
  color: #000000 !important;
}