/* ==========================================================================
   LibreBooking 5.0.3 — TRUE dark theme override
   Place at: /web/Web/css/custom.css
   Enable in config.php:  'css.extension.file' => 'custom.css',

   NOTE: the built-in "dark_red" theme is actually a LIGHT theme with
   dark-red accents — it does NOT darken the page. This stylesheet forces
   a real dark mode by overriding Bootstrap 5.3's theme variables and the
   light backgrounds the theme applies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL DARK PALETTE — drive everything through Bootstrap 5.3 variables.
   Applied broadly (and to the dark_red scope) so it wins over the light theme.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme='dark_red'],
body[data-bs-theme='dark_red'] {
  --bs-body-bg: #1e1e24;
  --bs-body-bg-rgb: 30, 30, 36;
  --bs-body-color: #e6e6e6;
  --bs-body-color-rgb: 230, 230, 230;

  --bs-secondary-bg: #2a2a32;
  --bs-secondary-bg-rgb: 42, 42, 50;
  --bs-secondary-color: #b8b8c2;
  --bs-tertiary-bg: #25252c;
  --bs-tertiary-color: #b8b8c2;

  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: #e6e6e6;
  --bs-border-color: #3a3a44;
  --bs-border-color-translucent: rgba(255,255,255,.12);

  /* Bright red brand */
  --bs-primary: #e30512;
  --bs-primary-rgb: 227, 5, 18;
  --bs-primary-text-emphasis: #ff8088;
  --bs-link-color: #ff5a63;
  --bs-link-color-rgb: 255, 90, 99;
  --bs-link-hover-color: #ff8088;
  --bs-link-hover-color-rgb: 255, 128, 136;
}

html, body,
body[data-bs-theme='dark_red'] {
  background-color: #1e1e24 !important;
  color: #e6e6e6 !important;
}

/* --------------------------------------------------------------------------
   2. KILL THE LIGHT UTILITY BACKGROUNDS
   The theme paints navbar, footer, panels with .bg-light / .bg-white / the
   light tertiary bg. Override them all to dark.
   -------------------------------------------------------------------------- */
.bg-light, .bg-white,
.navbar.bg-light, footer.bg-light {
  background-color: #17171c !important;
  color: #e6e6e6 !important;
}
.text-dark, .text-body, .text-black { color: #e6e6e6 !important; }

/* --------------------------------------------------------------------------
   3. ACCORDION (dashboard sections)
   -------------------------------------------------------------------------- */
.accordion {
  --bs-accordion-bg: #2a2a32;
  --bs-accordion-color: #e6e6e6;
  --bs-accordion-border-color: #3a3a44;
  --bs-accordion-btn-color: #ffffff;
  --bs-accordion-btn-bg: #e30512;
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-active-bg: #c00410;
  --bs-accordion-btn-icon: none;
}

/* Header bar: solid bright red, white text + white chevron */
.accordion-button,
.accordion-button.collapsed,
.accordion-button.link-primary {
  background-color: #e30512 !important;
  color: #ffffff !important;
}
.accordion-button:not(.collapsed) {
  background-color: #c00410 !important;
  color: #ffffff !important;
}
.accordion-button::after { filter: brightness(0) invert(1) !important; }

/* Bodies + items: dark */
.accordion-item,
.accordion-body,
.accordion-collapse,
.dashboardContents {
  background-color: #2a2a32 !important;
  color: #e6e6e6 !important;
  border-color: #3a3a44 !important;
}

/* --------------------------------------------------------------------------
   4. PLACEHOLDER / EMPTY-STATE TEXT (.noresults, .no-data)
   -------------------------------------------------------------------------- */
.noresults, .no-data,
.fst-italic, .text-body-secondary, .text-muted {
  color: #b8b8c2 !important;
  opacity: 1 !important;
}
.accordion-body .header,
.accordion-body .fw-bold,
h1,h2,h3,h4,h5,h6 { color: #e6e6e6 !important; }

/* --------------------------------------------------------------------------
   5. BADGES (the "0" counters) — dark pill, white text
   -------------------------------------------------------------------------- */
.badge.bg-primary, .accordion-header .badge {
  background-color: rgba(0,0,0,.5) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   6. BUTTONS — bright red, white labels (incl. "Rezervovat")
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: #e30512;
  --bs-btn-border-color: #e30512;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: #c00410;
  --bs-btn-hover-border-color: #c00410;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #a80310;
  --bs-btn-active-border-color: #a80310;
  --bs-btn-active-color: #ffffff;
}
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #e30512 !important;
  border-color: #e30512 !important;
  color: #ffffff !important;
}
.bg-primary { background-color: #e30512 !important; }

/* --------------------------------------------------------------------------
   7. NAV / DROPDOWNS / FOOTER text + surfaces
   -------------------------------------------------------------------------- */
.navbar .nav-link, .navbar .navbar-brand,
.navbar .link-primary, footer .link-primary, .link-primary {
  color: #ff5a63 !important;
}
.navbar .nav-link:hover, .link-primary:hover { color: #ff8088 !important; }
.dropdown-menu {
  --bs-dropdown-bg: #2a2a32;
  --bs-dropdown-color: #e6e6e6;
  --bs-dropdown-link-color: #e6e6e6;
  --bs-dropdown-link-hover-bg: #33333d;
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-border-color: #3a3a44;
}
.navbar .bi, footer .bi { color: #ff5a63 !important; }

/* --------------------------------------------------------------------------
   8. CARDS, MODALS, FORMS, TABLES
   -------------------------------------------------------------------------- */
.card { --bs-card-bg:#2a2a32; --bs-card-color:#e6e6e6; --bs-card-border-color:#3a3a44; }
.modal-content { background-color:#2a2a32 !important; color:#e6e6e6 !important; }
.form-control, .form-select {
  background-color:#2a2a32 !important; color:#e6e6e6 !important; border-color:#3a3a44 !important;
}
.form-control:focus, .form-select:focus {
  border-color:#e30512 !important; box-shadow:0 0 0 .2rem rgba(227,5,18,.25) !important;
}
.table {
  --bs-table-bg:#2a2a32; --bs-table-color:#e6e6e6; --bs-table-border-color:#3a3a44;
  --bs-table-striped-bg:#25252c; --bs-table-striped-color:#e6e6e6; --bs-table-hover-bg:#33333d;
}
.availabilityItem.border-bottom { border-color:#3a3a44 !important; }

/* Resource color tags use inline styles and are intentionally left as-is. */

/* --------------------------------------------------------------------------
   9. SCHEDULE PAGE — left-hand resource filter tree
   The category/group labels (Všechno, Konzole, Lounge, PC, ...) were
   rendering as dark text on dark bg. Lift them to readable light text.
   Scoped to the filter/sidebar so the colored schedule rows are untouched.
   -------------------------------------------------------------------------- */

/* The filter sidebar container + its headings */
#resourceFilter, .resourceFilter, #scheduleFilter, .reservationFilter,
.filter, .resourceTree, #resourceTree, .resource-tree,
.sidebar, #sidebar, .schedule-sidebar {
  color: #e6e6e6 !important;
}

/* Tree items / group names and their expand arrows */
#resourceFilter a, .resourceFilter a,
.resourceTree a, #resourceTree a, .resource-tree a,
.resourceGroup, .resourceGroupName, .groupName,
.jstree a, .jstree-anchor, .treeview a,
li.resourceGroup, .filter li, .filter a, .filter label, .filter span {
  color: #e6e6e6 !important;
  opacity: 1 !important;
}

/* Hover state for tree items */
.resourceTree a:hover, #resourceTree a:hover,
.jstree-anchor:hover, .filter a:hover {
  color: #ffffff !important;
}

/* Expand/collapse triangle icons (often grey carets) */
.resourceTree .bi, #resourceTree .bi, .filter .bi,
.jstree-icon, .treeview .caret, .resourceGroup .bi {
  color: #ff5a63 !important;
}

/* Filter section labels (Owner, Účastník, Minimální kapacita, Typ zdroje)
   are already white; keep them, but ensure any that inherit muted are lifted */
.filter .control-label, .filter h3, .filter h4, .filter legend {
  color: #e6e6e6 !important;
}

/* --------------------------------------------------------------------------
   10. SCHEDULE FILTER — the "Typ zdroje" select + its options
   -------------------------------------------------------------------------- */
#resourceType, select.form-select, .form-select-sm {
  background-color: #2a2a32 !important;
  color: #e6e6e6 !important;
  border-color: #3a3a44 !important;
}
/* Dropdown option list (rendered by the OS, but most browsers honor this) */
select.form-select option,
#resourceType option {
  background-color: #2a2a32 !important;
  color: #e6e6e6 !important;
}
/* The bold field labels (Typ zdroje, etc.) */
.form-group label.fw-bold, .form-group .fw-bold { color: #e6e6e6 !important; }

/* --------------------------------------------------------------------------
   11. SCHEDULE LEFT FILTER COLUMN (#reservations-left)
   Catch-all: make ALL text inside the left filter card readable on dark,
   regardless of the specific tree element class. The schedule grid is
   OUTSIDE this container, so it is unaffected.
   -------------------------------------------------------------------------- */
#reservations-left {
  background-color: #2a2a32 !important;
  color: #e6e6e6 !important;
}
#reservations-left .card,
#reservations-left .card-body,
#reservations-left .card-header {
  background-color: #2a2a32 !important;
  color: #e6e6e6 !important;
  border-color: #3a3a44 !important;
}

/* Every label, link, list item, and span in the filter -> light text */
#reservations-left a,
#reservations-left span,
#reservations-left li,
#reservations-left label,
#reservations-left .resourceGroup,
#reservations-left .resourceGroupName,
#reservations-left h5,
#reservations-left .card-title,
#reservations-left div {
  color: #e6e6e6 !important;
  opacity: 1 !important;
}

/* Links/toggles keep the red accent; tree arrows red */
#reservations-left a.link-primary,
#reservations-left .toggle-sidebar,
#reservations-left .bi {
  color: #ff5a63 !important;
}
#reservations-left a:hover { color: #ffffff !important; }

/* Filter inputs inside the sidebar */
#reservations-left .form-control,
#reservations-left .form-select {
  background-color: #1e1e24 !important;
  color: #e6e6e6 !important;
  border-color: #3a3a44 !important;
}

/* --------------------------------------------------------------------------
   12. RESERVATION PAGE — "Přidat účastníka" / participant & group picker modal
   Group/user names (Administrators, Allstaff, ...) render dark on the dark
   modal; only the green +/x icons show. Lift the text to readable light.
   Scoped to modals + the participant/invitee pickers.
   -------------------------------------------------------------------------- */

/* Any list of selectable users/groups inside a modal or picker */
.modal .modal-body,
.modal .modal-title,
.modal-content,
#participants, #invitees,
.participant-list, .group-list,
.userGroupList, .groupList, .userList,
.addparticipant, .addinvitee,
.reservation-users, .reservation-groups {
  color: #e6e6e6 !important;
}

/* The individual clickable rows (group / user names) */
.modal a, .modal li, .modal span, .modal label, .modal .item,
#participants a, #invitees a,
.userGroupList a, .groupList a, .userList a,
.userGroupList li, .groupList li, .userList li,
.addparticipant a, .addinvitee a,
.selectable, .selectableGroup, .selectableUser {
  color: #e6e6e6 !important;
  opacity: 1 !important;
}
.modal a:hover, .userGroupList a:hover, .groupList a:hover { color: #ffffff !important; }

/* Keep the +/x action icons colored, but readable */
.modal .bi, .modal .icon-plus, .modal .icon-remove,
.addIcon, .removeIcon {
  /* leave green + / red x as-is; just ensure not dimmed */
  opacity: 1 !important;
}

/* Selected participant chips (e.g. "Tomáš Svetlík") -> readable */
.participant, .invitee, .selectedParticipant,
.reservation-users .user, .reservation-groups .group {
  color: #e6e6e6 !important;
}

/* Owner / "Změnit" links and field labels on the reservation form */
#reservationForm label, .reservation label,
.reservationOwner, #ownerName, .form-label {
  color: #e6e6e6 !important;
}

/* --------------------------------------------------------------------------
   13. PARTICIPANT PICKER — forceful catch-all for the group/user rows
   The names (Administrators, Allstaff) were still dark. Force ALL descendants
   of the modal body to inherit a readable light color, overriding whatever
   dim value LibreBooking applies. Icons keep their own colors via later rules.
   -------------------------------------------------------------------------- */
.modal-body,
.modal-body * ,
.modal-content .modal-body,
.modal-content .modal-body * {
  color: #e6e6e6 !important;
}

/* Re-assert colored action icons so the catch-all above doesn't grey them */
.modal-body .bi-plus, .modal-body .bi-plus-square,
.modal-body .addIcon, .modal-body [class*="plus"] {
  color: #2ecc71 !important;   /* green + */
}
.modal-body .bi-x, .modal-body .bi-x-circle, .modal-body .bi-x-square,
.modal-body .removeIcon, .modal-body [class*="remove"] {
  color: #ff5a63 !important;   /* red x */
}

/* Hover on a selectable row */
.modal-body a:hover, .modal-body li:hover { color: #ffffff !important; }