/*
  Gaswerk Booking Theme Override
  Phase: contrast/readability hardening + cross-system color consistency
  Scope: color system only (no logic, routes, or behavior changes)
*/

:root {
  --bg: #0d0d0c;
  --bg-elev: #141412;
  --bg-soft: #1a1a18;
  --line: #2a2a27;
  --line-strong: #3a3a35;
  --text: #ece8de;
  --text-soft: #b9b3a7;
  --text-muted: #8f8a80;
  --accent: #b59b72;
  --accent-strong: #ccb287;

  --state-text-light: #f3eee5;
  --state-text-dark: #171511;
  --state-reservable: #eee7db;
  --state-unreservable: #5b443f;
  --state-reserved: #6d5d49;
  --state-mine: #978464;
  --state-participating: #574b3d;
  --state-pending: #4a4034;
  --state-past: #22211f;
  --state-hilite: #7d6b51;
}

body[data-bs-theme] {
  --primary: var(--accent);
  --primary-hover: var(--accent-strong);
  --primary-disabled: #7f725b;
  --text-color-btn: var(--state-text-dark);

  --color-lines: var(--line-strong);
  --reservable: var(--state-reservable);
  --unreservable: var(--state-unreservable);
  --reserved: var(--state-reserved);
  --reservedMine: var(--state-mine);
  --reservedParticipating: var(--state-participating);
  --reservedPending: var(--state-pending);
  --pasttime: var(--state-past);
  --hiliteReservation: var(--state-hilite);

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--text-soft);
  --bs-tertiary-color: var(--text-muted);
  --bs-secondary-bg: var(--bg-soft);
  --bs-tertiary-bg: var(--bg-elev);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: rgba(58, 58, 53, 0.6);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-strong);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 181, 155, 114;
  --bs-focus-ring-color: rgba(181, 155, 114, 0.32);
}

body {
  background-color: var(--bg);
  color: var(--text);
}

.text-muted,
.text-secondary {
  color: var(--text-muted) !important;
}

a,
.link-primary {
  color: var(--accent) !important;
}

a:hover,
a:focus,
.link-primary:hover,
.link-primary:focus {
  color: var(--accent-strong) !important;
}

/* Core shell surfaces */
.bg-light,
.bg-body-tertiary,
.navbar.bg-light {
  background-color: var(--bg-elev) !important;
  border-color: var(--line) !important;
}

.navbar {
  border-bottom: 1px solid var(--line);
}

.navbar-toggler {
  border-color: var(--line-strong);
}

.navbar-toggler-icon {
  filter: invert(0.88);
}

.dropdown-menu {
  background-color: var(--bg-elev);
  border-color: var(--line);
}

.dropdown-item {
  color: var(--text-soft);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--text);
  background-color: #23221f;
}

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

.card,
.modal-content,
.accordion-item,
.popover,
.toast {
  background-color: var(--bg-elev);
  border-color: var(--line);
  color: var(--text);
}

/* Tables and forms */
.table {
  --bs-table-bg: var(--bg-elev);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: #171715;
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: #22221f;
  --bs-table-hover-color: var(--text);
}

.table > :not(caption) > * > * {
  color: var(--text);
  border-bottom-color: var(--line);
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--bg-soft);
  color: var(--text);
  border-color: var(--line);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:focus,
.form-select:focus {
  color: var(--text);
  background-color: var(--bg-soft);
  border-color: var(--line-strong);
  box-shadow: none;
}

.form-control:disabled,
.form-select:disabled {
  background-color: #161513;
  color: var(--text-muted);
  border-color: var(--line);
}

/* Buttons and paging */
.btn-primary {
  --bs-btn-color: var(--state-text-dark);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--state-text-dark);
  --bs-btn-hover-bg: var(--accent-strong);
  --bs-btn-hover-border-color: var(--accent-strong);
  --bs-btn-active-color: var(--state-text-dark);
  --bs-btn-active-bg: var(--accent-strong);
  --bs-btn-active-border-color: var(--accent-strong);
  --bs-btn-disabled-color: var(--state-text-dark);
  --bs-btn-disabled-bg: #7f725b;
  --bs-btn-disabled-border-color: #7f725b;
}

.btn-outline-primary {
  --bs-btn-color: var(--accent-strong);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--state-text-dark);
  --bs-btn-hover-bg: var(--accent-strong);
  --bs-btn-hover-border-color: var(--accent-strong);
  --bs-btn-active-color: var(--state-text-dark);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
}

.btn-outline-secondary {
  --bs-btn-color: var(--text-soft);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: #23221f;
  --bs-btn-hover-border-color: var(--line-strong);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: #2b2925;
  --bs-btn-active-border-color: var(--line-strong);
}

.page-link {
  color: var(--accent);
  background-color: transparent;
  border-color: var(--line);
}

.page-link:hover {
  color: var(--text);
  background-color: #22221f;
  border-color: var(--line-strong);
}

.active > .page-link,
.page-link.active {
  color: var(--state-text-dark);
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Alerts */
.alert {
  background-color: var(--bg-soft);
  border-color: var(--line);
  color: var(--text);
}

.alert-warning {
  background-color: #372f24;
  border-color: #66563f;
  color: #f3e8d5;
}

.alert-danger {
  background-color: #35201d;
  border-color: #6a403a;
  color: #f3dfdc;
}

.alert-success {
  background-color: #223127;
  border-color: #4b6651;
  color: #dceee0;
}

.alert-link {
  color: var(--accent-strong) !important;
}

/* Accordion contrast */
.accordion-button,
.accordion-button.collapsed,
.accordion-button:not(.collapsed),
.accordion-header,
.accordion-header:has(.accordion-icon-container.collapsed) {
  background-color: var(--bg-elev) !important;
  color: var(--accent) !important;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: var(--line-strong);
}

/* Schedule shell alignment */
table.reservations td {
  border-color: var(--line) !important;
}

table.reservations td.resourcename,
table.reservations td.reslabel {
  background-color: var(--bg-elev) !important;
  color: var(--text-soft) !important;
}

table.reservations td.resourcename a {
  color: var(--accent) !important;
}

table.reservations td.resourcename a:hover {
  color: var(--accent-strong) !important;
}

table.reservations td.resdate,
#reservations .mobile .resdate {
  background-color: var(--bg-soft) !important;
  color: var(--text) !important;
}

table.reservations tr.today td.resdate,
table.reservations td.today,
#reservations .mobile td.today {
  background-color: #2a241d !important;
  color: var(--accent-strong) !important;
}

table.reservations tr.today td.reslabel {
  background-color: var(--bg-elev) !important;
  color: var(--text) !important;
}

.reservations-left-header {
  border-bottom-color: var(--line) !important;
  color: var(--text-soft) !important;
}

#reservations-left hr {
  background-color: var(--line) !important;
}

#calendar_toggle,
a.toggle-sidebar {
  color: var(--text-soft) !important;
}

#calendar_toggle:hover,
a.toggle-sidebar:hover {
  color: var(--accent-strong) !important;
}

/* Reservation state contrast hardening (schedule + my-calendar feed blocks) */
td.reservable,
div.reservable {
  background-color: var(--reservable) !important;
  color: var(--state-text-dark) !important;
}

.unreservable,
.buffer {
  background-color: var(--unreservable) !important;
  color: var(--state-text-light) !important;
}

.reserved {
  background-color: var(--reserved) !important;
  color: var(--state-text-light) !important;
}

.reserved.mine {
  background-color: var(--reservedMine) !important;
  color: var(--state-text-dark) !important;
}

.reserved.participating {
  background-color: var(--reservedParticipating) !important;
  color: var(--state-text-light) !important;
}

.reserved.pending {
  background-color: var(--reservedPending) !important;
  color: var(--state-text-light) !important;
}

.reserved.hilite,
.reserved.mine.hilite,
.reserved.participating.hilite,
.reserved.pending.hilite {
  opacity: 1 !important;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.reservable.hilite,
#reservations .ui-selecting {
  background-color: #d4c4ad !important;
  color: var(--state-text-dark) !important;
}

.reservable.clicked,
#reservations .ui-selected {
  background-color: #c0ad93 !important;
  color: var(--state-text-dark) !important;
}

.reserved.clicked {
  background-color: #7c6a52 !important;
  color: var(--state-text-light) !important;
}

.pasttime {
  background-color: var(--pasttime) !important;
  color: var(--text-soft) !important;
}

.past {
  opacity: 0.85;
}

.restricted {
  background: repeating-linear-gradient(45deg, #1f1e1b, #1f1e1b 10px, #2a2824 10px, #2a2824 20px), linear-gradient(to bottom, #2a2723, #1c1b19);
  color: var(--text-soft) !important;
}

.event,
.buffer,
.condensed-event {
  border-color: var(--line-strong) !important;
}

.legend {
  border-color: var(--line-strong) !important;
}

.res_popup_details .pendingApproval {
  color: var(--accent-strong) !important;
}

/* FullCalendar / My Calendar readability */
#calendar .fc-widget-content,
#calendar .fc-widget-header,
#calendar .fc-day-number {
  border-color: var(--line) !important;
}

#calendar .fc-day-header,
#calendar .fc-axis,
#calendar .fc-widget-header {
  background-color: var(--bg-soft);
  color: var(--text-soft);
}

#calendar .fc-event,
#calendar .fc-day-grid-event,
#calendar .fc-time-grid-event,
#calendar .fc-event-dot {
  background-color: var(--state-reserved) !important;
  border-color: var(--line-strong) !important;
  color: var(--state-text-light) !important;
}

#calendar .fc-event .fc-time,
#calendar .fc-event .fc-title {
  color: inherit !important;
}

#calendar .fc-event:hover {
  background-color: #7d6b51 !important;
}

.fc-past,
#calendar .fc-past {
  background-color: var(--pasttime) !important;
  color: var(--text-soft) !important;
}

#calendar .fc-past .fc-event {
  background-color: #3b342b !important;
  border-color: var(--line) !important;
  color: var(--text-soft) !important;
}

#calendar .fc-today {
  background-color: rgba(181, 155, 114, 0.08) !important;
}

/* Dashboard reservation cards */
.upcomingReservationsDashboard .reservation.hover {
  background-color: #2d2923 !important;
  color: var(--text) !important;
}

.upcomingReservationsDashboard .reservation.clicked {
  background-color: #25231f !important;
  color: var(--text) !important;
}

.upcomingReservationsDashboard .reservation.pending,
.upcomingReservationsDashboard .reservation.pending.hover,
.upcomingReservationsDashboard .reservation.pending.clicked {
  background-color: var(--state-pending) !important;
  color: var(--state-text-light) !important;
}

/* ===========================
   Widget hardening: Select2 + DataTables
   (Fixes: my-calendar dropdown + admin pagination)
=========================== */

/* ---- Select2 (Calendar dropdown with search) ---- */
.select2-container--default .select2-selection--single {
  background-color: var(--bg-soft) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent !important;
}

.select2-dropdown {
  background-color: var(--bg-elev) !important;
  border-color: var(--line) !important;
}

.select2-search--dropdown .select2-search__field {
  background-color: var(--bg-soft) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  outline: none !important;
}

.select2-container--default .select2-results__option {
  color: var(--text-soft) !important;
  background-color: transparent !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: var(--state-text-dark) !important;
  background-color: var(--accent-strong) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  color: var(--state-text-dark) !important;
  background-color: var(--accent) !important;
}

/* Disabled/empty-ish options should still be readable */
.select2-container--default .select2-results__option[aria-disabled="true"] {
  color: var(--text-muted) !important;
}

/* ---- DataTables pagination (Admin: manage_reservations) ---- */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-soft) !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-elev) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
  background: #23221f !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--text-muted) !important;
  border-color: var(--line) !important;
  background: transparent !important;
}

/* ===========================
   Fix: Dashboard "Ressourcen Verfuegbarkeit" - Resource-Namen lesbar
   (ohne Text-Shadow)
=========================== */

/* In deinem Screenshot sind das diese beigen "Pills".
   Wir setzen: dunkler Hintergrund + helle Schrift + klare Border. */
#availability .badge,
#availability .label,
#resourceAvailability .badge,
#resourceAvailability .label,
.resourceAvailabilityDashboard .badge,
.resourceAvailabilityDashboard .label,
.availabilityDashboard .badge,
.availabilityDashboard .label,
.dashboardAvailability .badge,
.dashboardAvailability .label,
#availability .btn,
#resourceAvailability .btn,
.resourceAvailabilityDashboard .btn,
.availabilityDashboard .btn,
.dashboardAvailability .btn {
  background-color: var(--bg-soft) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
}

/* Falls die Resource-Namen nicht in badge/label stecken, sondern als Text/Link innerhalb:
   (keine Shadow, nur harte Farbe) */
#availability .resourceName,
#availability .resource-name,
#availability .resourceTitle,
#availability .resource-title,
#resourceAvailability .resourceName,
#resourceAvailability .resource-name,
#resourceAvailability .resourceTitle,
#resourceAvailability .resource-title,
.resourceAvailabilityDashboard .resourceName,
.resourceAvailabilityDashboard .resource-name,
.resourceAvailabilityDashboard .resourceTitle,
.resourceAvailabilityDashboard .resource-title {
  color: var(--text) !important;
}

/* Optional: Icon/"i" Kontrast */
#availability .fa,
#availability .fas,
#availability .far,
#resourceAvailability .fa,
#resourceAvailability .fas,
#resourceAvailability .far {
  color: var(--accent-strong) !important;
}

/* ===========================
   Fix: DataTables Pagination - CURRENT Page ("1") mit hohem Kontrast
=========================== */

/* Normalzustand */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate a,
.dataTables_wrapper .dataTables_paginate span {
  color: var(--text-soft) !important;
}

/* Fallback hover for legacy .paginate_button markup */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate a:hover {
  color: var(--text) !important;
}

/* Dashboard: Resource Availability pills (fix link inherits accent) */
.resourceName a,
.resourceNameSelector {
  color: var(--text-color-btn) !important; /* dark text on accent pill */
  text-decoration: none !important;
}

.resourceName a:hover,
.resourceName a:focus,
.resourceNameSelector:hover,
.resourceNameSelector:focus {
  color: var(--text-color-btn) !important;
  text-decoration: underline !important; /* optional: hover affordance */
}

/* DataTables (Bootstrap pagination): fix current page contrast */
.dataTables_wrapper .dataTables_paginate .page-link {
  color: var(--text-soft) !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
}

.dataTables_wrapper .dataTables_paginate .page-link:hover,
.dataTables_wrapper .dataTables_paginate .page-link:focus {
  color: var(--text) !important;
  background: #23221f !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}

/* Current page can be indicated either via .active OR aria-current="page" */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .page-link.active,
.dataTables_wrapper .dataTables_paginate .page-link[aria-current="page"] {
  color: var(--accent-strong) !important;
  background: var(--bg-soft) !important;
  border-color: var(--accent-strong) !important;
}

/* Disabled prev/next */
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .page-link.disabled {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: var(--line) !important;
}