/*
 * FileBrowser Custom Theme
 *
 * This stylesheet defines a cohesive light theme based off the colours extracted
 * from your provided logo. It uses CSS custom properties (variables) to
 * establish a colour system and applies them across common FileBrowser UI
 * components. Where possible the selectors target Bootstrap classes that
 * FileBrowser uses for its navigation, sidebar, tables and forms. You can
 * further tweak these values to suit your preferences.
 */

:root {
  /* Core palette */
  --color-primary-dark: #181434;   /* dark purple used for top bar */
  --color-primary:      #514e66;   /* sidebar background */
  --color-secondary:    #674a8c;   /* primary buttons and highlights */
  --color-accent:       #9c7cb6;   /* hover states and secondary buttons */
  --color-background:   #181433;   /* overall page background */
  --color-surface:      #f6f0ef;   /* cards, tables and panels */
  --color-text:         #46435c;   /* default text colour */
  --color-text-light:   #e9e2ee;   /* light text for dark backgrounds */
}

/* Page background & base text */
body,
html {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
  font-family: sans-serif;
}

/* Top navigation bar */
.navbar {
  background-color: var(--color-primary-dark) !important;
  border-bottom: 1px solid var(--color-primary) !important;
  color: var(--color-text-light) !important;
}
.navbar .navbar-brand,
.navbar .navbar-nav .nav-link {
  color: var(--color-text-light) !important;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
  color: var(--color-accent) !important;
}

/* Sidebar navigation */
.sidebar {
  background-color: var(--color-primary) !important;
  color: var(--color-text-light) !important;
}
.sidebar a,
.sidebar .nav-link {
  color: var(--color-text-light) !important;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background-color: var(--color-secondary) !important;
  color: var(--color-text-light) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: var(--color-text-light) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-text-light) !important;
}

.btn-secondary,
.btn-outline-secondary {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-text-light) !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: var(--color-text-light) !important;
}

/* Cards, panels and lists */
.card,
.list-group-item,
.content,
.main,
.table,
.modal-content {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Tables */
.table thead th {
  background-color: var(--color-primary) !important;
  color: var(--color-text-light) !important;
  border-color: var(--color-primary) !important;
}
.table tbody tr:nth-child(even) {
  background-color: var(--color-background) !important;
}
.table tbody tr:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-text-light) !important;
}

/* Forms */
input.form-control,
select.form-control,
textarea.form-control {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-primary) !important;
}
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 0.2rem rgba(103, 74, 140, 0.25) !important;
}

/* Tabs */
.nav-tabs .nav-link.active {
  background-color: var(--color-surface) !important;
  border-color: var(--color-secondary) !important;
  color: var(--color-secondary) !important;
}
.nav-tabs .nav-link {
  color: var(--color-primary-dark) !important;
}
.nav-tabs .nav-link:hover {
  color: var(--color-accent) !important;
}

/* Links */
a {
  color: var(--color-secondary) !important;
  text-decoration: none;
}
a:hover {
  color: var(--color-accent) !important;
  text-decoration: underline;
}

/* Footer */
footer {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-text-light) !important;
}

/* Miscellaneous overrides */
.progress-bar {
  background-color: var(--color-secondary) !important;
}

.breadcrumb {
  background-color: var(--color-surface) !important;
}

.badge-primary {
  background-color: var(--color-secondary) !important;
  color: var(--color-text-light) !important;
}

.alert-primary {
  background-color: var(--color-accent) !important;
  border-color: var(--color-secondary) !important;
  color: var(--color-text-light) !important;
}