/*
 * Rattenloch LibreBooking skin
 * Mount this file to /var/www/html/Web/css/rattenloch.css
 * and set LB_CSS_EXTENSION_FILE=rattenloch.css.
 */

:root,
[data-bs-theme='default'],
[data-bs-theme='dimgray'],
[data-bs-theme='dark_red'],
[data-bs-theme='dark_green'],
[data-bs-theme='french_blue'],
[data-bs-theme='cake_blue'],
[data-bs-theme='orange'] {
  --rl-black: #080806;
  --rl-ink: #12120f;
  --rl-panel: #191914;
  --rl-paper: #ece5d0;
  --rl-ash: #d8d1be;
  --rl-muted: #9b957f;
  --rl-red: #b83124;
  --rl-green: #6d8f70;
  --rl-acid: #d7df72;
  --rl-line: rgba(236, 229, 208, 0.22);
  --primary: var(--rl-red);
  --primary-hover: #8f241b;
  --primary-disabled: #6c5a52;
  --text-color-btn: var(--rl-paper);
  --color-lines: rgba(236, 229, 208, 0.28);
  --reservable: #211f19;
  --unreservable: #3b332d;
  --reserved: #6d8f70;
  --reservedMine: #d7df72;
  --reservedParticipating: #b83124;
  --reservedPending: #c49f5a;
  --pasttime: #36332b;
  --hiliteReservation: #d7df72;
  --label-text-on-light: #080806;
  --label-text-on-dark: #ece5d0;
  --bs-body-bg: var(--rl-black);
  --bs-body-color: var(--rl-paper);
  --bs-border-color: rgba(236, 229, 208, 0.25);
  --bs-link-color: var(--rl-acid);
  --bs-link-hover-color: #f3f7a9;
  --bs-secondary-bg: #201f1a;
  --bs-tertiary-bg: #171611;
}

html {
  background: var(--rl-black);
}

body {
  color: var(--rl-paper);
  background:
    radial-gradient(circle at 18% 6%, rgba(184, 49, 36, 0.19), transparent 30rem),
    radial-gradient(circle at 86% 24%, rgba(109, 143, 112, 0.16), transparent 26rem),
    linear-gradient(rgba(8, 8, 6, 0.82), rgba(8, 8, 6, 0.93)),
    url('/assets/rattenloch-hero.png') center top / cover fixed,
    var(--rl-black) !important;
  font-family: 'Arial Narrow', 'Roboto Condensed', 'Hind', system-ui, sans-serif;
  letter-spacing: 0;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image:
    linear-gradient(115deg, transparent 0 47%, rgba(255, 255, 255, 0.08) 48% 49%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px);
}

body > .d-flex.align-items-center.gap-2.m-2 {
  margin: 0 !important;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rl-line);
  background: rgba(8, 8, 6, 0.86);
  backdrop-filter: blur(12px);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
}

img.logo {
  content: url('/assets/rattenloch-rat-logo.png');
  width: 4.25rem;
  max-width: none;
  max-height: 3.2rem;
  object-fit: contain;
  filter: drop-shadow(3px 3px 0 rgba(184, 49, 36, 0.92));
  transform: rotate(-5deg);
}

.border-start {
  border-left-color: var(--rl-line) !important;
}

h1,
h2,
h3,
h4,
h5,
.modal-title,
.card-title,
.schedule_title,
.reservations-left-header {
  color: var(--rl-paper);
  font-family: Impact, 'Arial Narrow', 'Roboto Condensed', 'Hind', sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h5.mb-0 a.link-primary {
  color: var(--rl-paper) !important;
  text-decoration: none;
}

h5.mb-0:first-child a.link-primary {
  color: var(--rl-acid) !important;
}

.navbar.bg-light,
nav.navbar {
  border-block: 1px solid var(--rl-line);
  background: rgba(18, 18, 15, 0.94) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32) !important;
}

.navbar-toggler {
  border-color: var(--rl-line);
  background: var(--rl-paper);
  border-radius: 0;
}

.nav-link,
.link-primary,
.dropdown-toggle {
  color: var(--rl-paper) !important;
  font-weight: 800;
  text-transform: uppercase;
}

.nav-link:hover,
.nav-link:focus,
.link-primary:hover,
.link-primary:focus {
  color: var(--rl-acid) !important;
}

.dropdown-menu {
  color: var(--rl-paper);
  border: 1px solid var(--rl-line);
  border-radius: 0;
  background: rgba(18, 18, 15, 0.98);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55);
}

.dropdown-item {
  color: var(--rl-paper);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:focus-visible {
  color: var(--rl-black);
  background: var(--rl-acid);
}

.dropdown-divider {
  border-top-color: var(--rl-line);
}

.container,
.container-fluid,
main,
#page-login,
#page-register,
#page-dashboard,
#page-schedule,
#page-manage-reservations {
  color: var(--rl-paper);
}

.card,
.modal-content,
.accordion-item,
.list-group-item,
.table,
.table-responsive,
.search-date-options,
.reservations-left-content,
#reservations-left,
#resourceGroupsContainer,
#entityChoices,
#editEntityChoices,
#dayDialog,
#deleteCustomLayoutDialog,
#confirmCreateSlotDialog,
.wait-box {
  color: var(--rl-paper);
  border-color: var(--rl-line) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(135deg, rgba(236, 229, 208, 0.06), transparent 42%),
    rgba(18, 18, 15, 0.93) !important;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.38);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.accordion-header,
.accordion-button,
.accordion-button.collapsed,
.accordion-button:not(.collapsed) {
  color: var(--rl-paper) !important;
  border-color: var(--rl-line) !important;
  background: rgba(8, 8, 6, 0.66) !important;
}

.accordion-button::after {
  filter: invert(1);
}

.btn {
  border-radius: 0;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}

.btn-primary,
.btn-success {
  color: var(--rl-black) !important;
  border-color: var(--rl-acid) !important;
  background: var(--rl-acid) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  color: var(--rl-paper) !important;
  border-color: var(--rl-red) !important;
  background: var(--rl-red) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-secondary {
  color: var(--rl-paper) !important;
  border-color: var(--rl-line) !important;
  background: rgba(8, 8, 6, 0.42) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-secondary:hover {
  color: var(--rl-black) !important;
  border-color: var(--rl-acid) !important;
  background: var(--rl-acid) !important;
}

.form-control,
.form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.flatpickr-input,
textarea,
input[type='text'],
input[type='email'],
input[type='password'] {
  color: var(--rl-paper) !important;
  border-color: var(--rl-line) !important;
  border-radius: 0 !important;
  background-color: rgba(8, 8, 6, 0.72) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
  border-color: var(--rl-acid) !important;
  box-shadow: 0 0 0 0.2rem rgba(215, 223, 114, 0.18) !important;
}

.form-control::placeholder {
  color: rgba(216, 209, 190, 0.55);
}

.table,
table,
td,
th {
  color: var(--rl-paper);
}

.table > :not(caption) > * > *,
table.dataTable > tbody > tr,
table.dataTable > thead > tr {
  color: var(--rl-paper);
  border-color: var(--rl-line) !important;
  background-color: rgba(18, 18, 15, 0.78);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(236, 229, 208, 0.04);
}

.page-link {
  color: var(--rl-paper);
  border-radius: 0 !important;
  border-color: var(--rl-line);
  background: rgba(8, 8, 6, 0.74);
}

.active > .page-link,
.page-link.active,
.page-link:hover {
  color: var(--rl-black);
  border-color: var(--rl-acid);
  background: var(--rl-acid);
}

.alert {
  border-radius: 0;
  border-width: 1px;
  font-weight: 700;
}

.alert-info,
.alert-primary {
  color: var(--rl-paper);
  border-color: rgba(109, 143, 112, 0.62);
  background: rgba(109, 143, 112, 0.23);
}

.alert-warning {
  color: var(--rl-black);
  border-color: var(--rl-acid);
  background: var(--rl-acid);
}

.alert-danger {
  color: var(--rl-paper);
  border-color: var(--rl-red);
  background: rgba(184, 49, 36, 0.48);
}

table.reservations {
  border: 1px solid var(--rl-line);
  background: rgba(8, 8, 6, 0.72);
}

table.reservations thead td,
table.reservations td.reslabel,
table.reservations td.resourcename {
  color: var(--rl-paper);
  border-color: var(--rl-line);
  background: #171611;
}

table.reservations td.resourcename a {
  color: var(--rl-acid);
}

table.reservations td.resdate,
#reservations .mobile .resdate {
  color: var(--rl-paper);
  background: #31281f;
}

table.reservations tr.today td.resdate,
table.reservations td.today,
#reservations .mobile td.today {
  color: var(--rl-black);
  background: var(--rl-acid);
}

td.reservable,
div.reservable,
table.reservations.mobile div.reservable,
.reservations.condensed div.reservable {
  color: var(--rl-muted);
  border-color: rgba(236, 229, 208, 0.2);
  background:
    repeating-linear-gradient(-45deg, rgba(236, 229, 208, 0.035) 0 1px, transparent 1px 8px),
    var(--reservable);
}

.reservations.condensed div.reservable:hover,
td.reservable:hover,
div.reservable:hover {
  color: var(--rl-black);
  background: var(--rl-acid);
}

.reserved {
  color: var(--rl-black) !important;
  border-color: rgba(8, 8, 6, 0.6) !important;
  background: var(--rl-green) !important;
  font-weight: 800;
}

.reserved.mine {
  color: var(--rl-black) !important;
  background: var(--rl-acid) !important;
}

.reserved.participating,
.reserved.clicked {
  color: var(--rl-paper) !important;
  background: var(--rl-red) !important;
}

.reserved.pending {
  color: var(--rl-black) !important;
  background: var(--reservedPending) !important;
}

.unreservable,
.buffer,
.pasttime,
.past {
  color: var(--rl-muted) !important;
  background: #302d27 !important;
}

.reservable.hilite,
#reservations .ui-selecting,
.reservable.clicked,
#reservations .ui-selected,
table.reservations td.resourcename.hilite {
  color: var(--rl-black) !important;
  background: var(--rl-acid) !important;
}

.event,
.buffer,
.condensed-event,
.reservations.mobile .reserved {
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.38);
}

div.legend {
  color: var(--rl-black);
  border: 1px solid rgba(8, 8, 6, 0.35);
  border-radius: 0;
  font-weight: 800;
}

.flatpickr-calendar,
.ui-datepicker,
.popover,
.tooltip-inner {
  color: var(--rl-paper);
  border-color: var(--rl-line);
  border-radius: 0;
  background: #14130f;
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
  color: var(--rl-paper) !important;
  background: var(--rl-red) !important;
}

.flatpickr-day {
  color: var(--rl-paper);
  border-radius: 0;
}

.flatpickr-day:hover,
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  color: var(--rl-black) !important;
  border-color: var(--rl-acid) !important;
  background: var(--rl-acid) !important;
}

footer {
  color: var(--rl-muted);
  border-top: 1px solid var(--rl-line);
  background: rgba(8, 8, 6, 0.82);
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  body > .d-flex.align-items-center.gap-2.m-2 {
    align-items: flex-start !important;
  }

  img.logo {
    width: 3.4rem;
    max-height: 2.7rem;
  }
}