/* XAB Theme for Calibre-Web */
/* Palette: deep slate #12141F, viola #7B68EE/#9B8BFF */

:root {
  --xab-darkest: #12141F;
  --xab-dark: #1E2138;
  --xab-mid: #343858;
  --xab-accent: #7B68EE;
  --xab-accent-light: #9B8BFF;
  --xab-surface: #F0EDFF;
  --xab-white: #FFFFFF;
  --xab-text: #E0DFF0;
  --xab-text-muted: #9896B0;
  --xab-border: rgba(123,104,238,0.2);
}

/* Base body */
body {
  background-color: var(--xab-darkest) !important;
  color: var(--xab-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Navbar */
.navbar-default {
  background-color: var(--xab-dark) !important;
  border-bottom: 1px solid var(--xab-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}


/* Logo in navbar */
.navbar-default .navbar-brand {
  background-image: url('/static/xab-logo.png') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center left !important;
  width: 300px !important;
  height: 70px !important;
  padding: 0 !important;
  margin: 15px 15px 15px 15px !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  display: inline-block !important;
}

.navbar-default .navbar-brand:hover {
  opacity: 0.85 !important;
}


.navbar-default .navbar-nav > li > a {
  color: var(--xab-text-muted) !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--xab-accent-light) !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  background-color: var(--xab-mid) !important;
  color: var(--xab-accent-light) !important;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--xab-accent) !important;
}

/* Search input */
.navbar-form .form-control {
  background-color: var(--xab-mid) !important;
  border: 1px solid var(--xab-border) !important;
  color: var(--xab-text) !important;
}

.navbar-form .form-control::placeholder {
  color: var(--xab-text-muted) !important;
}

.navbar-form .btn-default {
  background-color: var(--xab-accent) !important;
  border-color: var(--xab-accent) !important;
  color: var(--xab-white) !important;
}

.navbar-form .btn-default:hover {
  background-color: var(--xab-accent-light) !important;
}

/* Container and panels */
.container-fluid, .container {
  background-color: transparent !important;
}

.panel {
  background-color: var(--xab-dark) !important;
  border: 1px solid var(--xab-border) !important;
  border-radius: 8px !important;
}

.panel-heading {
  background-color: var(--xab-mid) !important;
  border-bottom: 1px solid var(--xab-border) !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--xab-accent-light) !important;
}

.panel-body {
  color: var(--xab-text) !important;
}

/* Books grid */
.book {
  background-color: var(--xab-dark) !important;
  border: 1px solid var(--xab-border) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.book:hover {
  border-color: var(--xab-accent) !important;
  box-shadow: 0 4px 20px rgba(123,104,238,0.15) !important;
  transform: translateY(-2px) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--xab-accent) !important;
  border-color: var(--xab-accent) !important;
  color: var(--xab-white) !important;
  border-radius: 6px !important;
}

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

.btn-default {
  background-color: var(--xab-mid) !important;
  border-color: var(--xab-border) !important;
  color: var(--xab-text) !important;
  border-radius: 6px !important;
}

.btn-default:hover {
  background-color: var(--xab-accent) !important;
  color: var(--xab-white) !important;
}

/* Links */
a {
  color: var(--xab-accent-light) !important;
}

a:hover {
  color: var(--xab-white) !important;
  text-decoration: none !important;
}

/* Tables */
.table {
  color: var(--xab-text) !important;
}

.table > thead > tr > th {
  border-bottom: 2px solid var(--xab-border) !important;
  color: var(--xab-accent-light) !important;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--xab-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(30,33,56,0.5) !important;
}

.table-hover > tbody > tr:hover {
  background-color: var(--xab-mid) !important;
}

/* Form controls */
.form-control {
  background-color: var(--xab-mid) !important;
  border: 1px solid var(--xab-border) !important;
  color: var(--xab-text) !important;
  border-radius: 6px !important;
}

.form-control:focus {
  border-color: var(--xab-accent) !important;
  box-shadow: 0 0 0 3px rgba(123,104,238,0.15) !important;
}

select.form-control {
  background-color: var(--xab-mid) !important;
  color: var(--xab-text) !important;
}

/* Login page */
#login_form, .login-container {
  background-color: var(--xab-dark) !important;
  border: 1px solid var(--xab-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* Sidebar */
#sidebar, .sidebar {
  background-color: var(--xab-dark) !important;
}

#sidebar a, .sidebar a {
  color: var(--xab-text-muted) !important;
}

#sidebar a:hover, .sidebar a:hover,
#sidebar a.active, .sidebar a.active {
  color: var(--xab-accent-light) !important;
  background-color: var(--xab-mid) !important;
}

/* Well and jumbotron */
.well {
  background-color: var(--xab-dark) !important;
  border: 1px solid var(--xab-border) !important;
  border-radius: 8px !important;
}

.jumbotron {
  background-color: var(--xab-dark) !important;
}

/* Dropdown */
.dropdown-menu {
  background-color: var(--xab-dark) !important;
  border: 1px solid var(--xab-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

.dropdown-menu > li > a {
  color: var(--xab-text) !important;
}

.dropdown-menu > li > a:hover {
  background-color: var(--xab-mid) !important;
  color: var(--xab-accent-light) !important;
}

/* Alerts */
.alert-info {
  background-color: rgba(123,104,238,0.15) !important;
  border-color: var(--xab-accent) !important;
  color: var(--xab-accent-light) !important;
}

.alert-success {
  background-color: rgba(76,175,80,0.15) !important;
  border-color: #4CAF50 !important;
  color: #81C784 !important;
}

.alert-danger {
  background-color: rgba(244,67,54,0.15) !important;
  border-color: #F44336 !important;
  color: #EF9A9A !important;
}

/* Pagination */
.pagination > li > a {
  background-color: var(--xab-dark) !important;
  border-color: var(--xab-border) !important;
  color: var(--xab-text-muted) !important;
}

.pagination > li > a:hover {
  background-color: var(--xab-mid) !important;
  color: var(--xab-accent-light) !important;
}

.pagination > .active > a {
  background-color: var(--xab-accent) !important;
  border-color: var(--xab-accent) !important;
  color: var(--xab-white) !important;
}

/* Badges and labels */
.badge {
  background-color: var(--xab-accent) !important;
}

.label-default {
  background-color: var(--xab-mid) !important;
}

/* Cover images */
.cover img {
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* Footer */
.footer, footer {
  background-color: var(--xab-dark) !important;
  border-top: 1px solid var(--xab-border) !important;
  color: var(--xab-text-muted) !important;
}

/* Modal */
.modal-content {
  background-color: var(--xab-dark) !important;
  border: 1px solid var(--xab-border) !important;
  border-radius: 12px !important;
}

.modal-header {
  border-bottom: 1px solid var(--xab-border) !important;
}

.modal-footer {
  border-top: 1px solid var(--xab-border) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--xab-darkest);
}

::-webkit-scrollbar-thumb {
  background: var(--xab-mid);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--xab-accent);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--xab-white) !important;
}

/* Glyphicons color override */
.glyphicon {
  color: var(--xab-accent) !important;
}

/* Description and metadata text */
.author-name a, .series-name a {
  color: var(--xab-accent-light) !important;
}

/* Category badges */
.btn-xs {
  border-radius: 12px !important;
}

/* Navbar height for logo */
.navbar-default {
  min-height: 100px !important; padding-top: 0 !important; padding-bottom: 0 !important;
}

.navbar-default .navbar-nav > li > a {
  padding-top: 38px !important;
  padding-bottom: 38px !important;
}

.navbar-form {
  margin-top: 30px !important;
}

/* Shelf buttons - override Calibre-Web green #45b29d */
.navigation .create-shelf a {
  background: var(--xab-accent) !important;
  color: var(--xab-white) !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}

.navigation .create-shelf a:hover {
  background: var(--xab-accent-light) !important;
}

/* Any other elements using the teal green */
.btn-success {
  background-color: var(--xab-accent) !important;
  border-color: var(--xab-accent) !important;
  color: var(--xab-white) !important;
}

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

.btn-info {
  background-color: var(--xab-mid) !important;
  border-color: var(--xab-border) !important;
  color: var(--xab-accent-light) !important;
}

.btn-info:hover {
  background-color: var(--xab-accent) !important;
  color: var(--xab-white) !important;
}

.btn-warning {
  background-color: var(--xab-mid) !important;
  border-color: rgba(155, 139, 255, 0.4) !important;
  color: var(--xab-accent-light) !important;
}

.btn-danger {
  background-color: rgba(220, 53, 69, 0.2) !important;
  border-color: rgba(220, 53, 69, 0.4) !important;
  color: #ff6b7a !important;
  border-radius: 6px !important;
}

.btn-danger:hover {
  background-color: rgba(220, 53, 69, 0.4) !important;
}

/* Catch-all: override any remaining #45b29d */
[style*="45b29d"], [style*="background: rgb(69, 178, 157)"] {
  background-color: var(--xab-accent) !important;
}

/* Filter/sort buttons - make icons visible on purple bg */
.filterheader .btn-primary {
  background-color: var(--xab-mid) !important;
  border-color: var(--xab-border) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  margin: 2px !important;
}

.filterheader .btn-primary .glyphicon {
  color: var(--xab-text-muted) !important;
}

.filterheader .btn-primary:hover {
  background-color: var(--xab-accent) !important;
  border-color: var(--xab-accent) !important;
}

.filterheader .btn-primary:hover .glyphicon {
  color: var(--xab-white) !important;
}

.filterheader .btn-primary.active {
  background-color: var(--xab-accent) !important;
  border-color: var(--xab-accent) !important;
}

.filterheader .btn-primary.active .glyphicon {
  color: var(--xab-white) !important;
}

/* Hide internal classification tag */
a[href*="__xab_classified__"],
.tag[data-name="__xab_classified__"],
span:has(a[href*="__xab_classified__"]) {
  display: none !important;
}