/* Minimal theme overrides using Bootstrap variables (system-wide) Applied via: */ :root[data-theme="dark"] { --bs-body-bg: var(--bs-gray-900); --bs-body-color: var(--bs-gray-100); --bs-border-color: rgba(255, 255, 255, 0.15); /* Shell (topnav / sidenav / rail / footer) */ --ap-shell-bg: var(--bs-gray-900); --ap-shell-fg: var(--bs-gray-100); --ap-shell-border-color: rgba(255, 255, 255, 0.15); } :root[data-theme="light"] { /* Light mode content */ --bs-body-bg: var(--bs-gray-100); --bs-body-color: var(--bs-gray-900); /* Shell stays dark in light mode too */ --ap-shell-bg: var(--bs-gray-900); --ap-shell-fg: var(--bs-gray-100); --ap-shell-border-color: rgba(255, 255, 255, 0.15); } :root[data-theme="dark"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } :root[data-theme="light"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Light mode: keep the main content area light and readable */ :root[data-theme="light"] #layoutSidenav_content { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Global readability scale (content + nav) */ #layoutSidenav_content { font-size: 1.05rem; line-height: 1.45; } @media (max-width: 575.98px) { #layoutSidenav_content { font-size: 1rem; } } /* Make common controls a touch larger inside the app */ #layoutSidenav_content .form-control, #layoutSidenav_content .form-select, #layoutSidenav_content .btn { font-size: 1rem; } /* Left nav: slightly larger targets for readability */ .sb-sidenav .nav-link { font-size: 0.98rem; padding-top: 0.65rem; padding-bottom: 0.65rem; } /* Date range picker (Create Reservation) */ :root[data-theme="dark"] .daterangepicker { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important; } /* Flatpickr (View Reservations) */ :root[data-theme="dark"] .flatpickr-calendar { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important; } :root[data-theme="dark"] .flatpickr-months, :root[data-theme="dark"] .flatpickr-weekdays { background-color: rgba(255, 255, 255, 0.06) !important; } :root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month, :root[data-theme="dark"] .flatpickr-months .flatpickr-next-month, :root[data-theme="dark"] .flatpickr-current-month, :root[data-theme="dark"] .flatpickr-weekday { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .flatpickr-day { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .flatpickr-day:hover { background-color: rgba(255, 255, 255, 0.08) !important; } :root[data-theme="dark"] .flatpickr-day.disabled, :root[data-theme="dark"] .flatpickr-day.prevMonthDay, :root[data-theme="dark"] .flatpickr-day.nextMonthDay { color: rgba(255, 255, 255, 0.35) !important; } :root[data-theme="dark"] .flatpickr-day.today { border-color: #1890ff !important; background: transparent !important; color: #1890ff !important; } :root[data-theme="dark"] .daterangepicker .calendar-table { background-color: var(--bs-gray-900) !important; border-color: var(--bs-border-color) !important; } :root[data-theme="dark"] .daterangepicker .calendar-table table { background-color: transparent !important; } :root[data-theme="dark"] .daterangepicker .calendar-table thead th { background-color: transparent !important; } :root[data-theme="dark"] .daterangepicker td, :root[data-theme="dark"] .daterangepicker th { color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; } /* Day cells: available/unavailable/disabled */ :root[data-theme="dark"] .daterangepicker td { background-color: transparent !important; } :root[data-theme="dark"] .daterangepicker td.available { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .daterangepicker td.available:hover, :root[data-theme="dark"] .daterangepicker td.available.hover { background-color: rgba(255, 255, 255, 0.08) !important; } :root[data-theme="dark"] .daterangepicker td.off, :root[data-theme="dark"] .daterangepicker td.disabled, :root[data-theme="dark"] .daterangepicker td.off.in-range { background-color: rgba(255, 255, 255, 0.03) !important; color: rgba(255, 255, 255, 0.35) !important; } :root[data-theme="dark"] .daterangepicker td.off:hover, :root[data-theme="dark"] .daterangepicker td.disabled:hover { background-color: rgba(255, 255, 255, 0.03) !important; } /* Range selection styling */ :root[data-theme="dark"] .daterangepicker td.in-range { background-color: rgba(24, 144, 255, 0.18) !important; color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .daterangepicker td.active, :root[data-theme="dark"] .daterangepicker td.active:hover, :root[data-theme="dark"] .daterangepicker td.start-date, :root[data-theme="dark"] .daterangepicker td.end-date { background-color: #1890ff !important; color: #fff !important; } /* Month/year header and nav arrows */ :root[data-theme="dark"] .daterangepicker .calendar-table .next span, :root[data-theme="dark"] .daterangepicker .calendar-table .prev span { border-color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .daterangepicker .calendar-table .month { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .daterangepicker .drp-buttons { border-top: 1px solid var(--bs-border-color) !important; } :root[data-theme="dark"] .daterangepicker .drp-buttons .drp-selected { color: rgba(255, 255, 255, 0.7) !important; } :root[data-theme="dark"] .daterangepicker .drp-buttons .btn { background-color: rgba(255, 255, 255, 0.06) !important; border-color: var(--bs-border-color) !important; color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .daterangepicker .drp-buttons .btn:hover { background-color: rgba(255, 255, 255, 0.10) !important; } :root[data-theme="dark"] .daterangepicker .ranges li { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .daterangepicker .ranges li.active { background-color: rgba(24, 144, 255, 0.22) !important; color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .daterangepicker .ranges li:hover { background-color: rgba(255, 255, 255, 0.06) !important; } :root[data-theme="light"] .daterangepicker { background-color: #fff !important; color: var(--bs-gray-900) !important; } :root[data-theme="light"] .daterangepicker td, :root[data-theme="light"] .daterangepicker th { color: var(--bs-gray-900) !important; } :root[data-theme="light"] #MainForm { color: var(--bs-body-color); } /* Top head bar divider */ .sb-topnav { border-bottom: 1px solid var(--bs-border-color) !important; } /* In light mode the shell is dark, so use a light border */ :root[data-theme="light"] .sb-topnav { border-bottom: 1px solid var(--ap-shell-border-color) !important; } :root[data-theme="dark"] .bg-light { background-color: var(--bs-gray-800) !important; } :root[data-theme="dark"] .text-muted { color: rgba(255, 255, 255, 0.6) !important; } :root[data-theme="dark"] .card, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .dropdown-menu { background-color: var(--bs-gray-800); color: var(--bs-gray-100); border-color: var(--bs-border-color); } :root[data-theme="dark"] .dropdown-item { color: var(--bs-gray-100); } :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); color: var(--bs-gray-100); } :root[data-theme="dark"] .table { color: var(--bs-gray-100); } :root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255, 255, 255, 0.03); color: var(--bs-gray-100); } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: var(--bs-gray-900); color: var(--bs-gray-100); border-color: var(--bs-border-color); } /* Catch unclassed inputs/textareas/selects that still render white */ :root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; } :root[data-theme="dark"] .form-control::placeholder { color: rgba(255, 255, 255, 0.45); } /* Buttons that look wrong in dark mode */ :root[data-theme="dark"] .btn-light { background-color: var(--bs-gray-700); border-color: var(--bs-gray-600); color: var(--bs-gray-100); } :root[data-theme="dark"] .btn-dark { background-color: var(--bs-gray-700); border-color: var(--bs-gray-600); color: var(--bs-gray-100); } :root[data-theme="dark"] .btn-outline-dark { color: var(--bs-gray-100); border-color: var(--bs-gray-600); } :root[data-theme="dark"] .btn-outline-dark:hover { background-color: var(--bs-gray-700); border-color: var(--bs-gray-600); } /* Availability refresh button */ :root[data-theme="dark"] .refresh-button { background-color: var(--bs-gray-700) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-gray-600) !important; } :root[data-theme="dark"] #refreshButtonText { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .refresh-button.loading { background-color: var(--bs-gray-600) !important; } /* Footer should match sidebar/topnav dark tone */ :root[data-theme="dark"] #MainFooter { background-color: var(--bs-gray-900) !important; color: rgba(255, 255, 255, 0.7); border-top: 1px solid var(--bs-border-color); } /* Footer stays dark in light mode too */ :root[data-theme="light"] #MainFooter { background-color: var(--ap-shell-bg) !important; color: rgba(255, 255, 255, 0.7); border-top: 1px solid var(--ap-shell-border-color) !important; } :root[data-theme="light"] #MainFooter .text-muted { color: rgba(255, 255, 255, 0.7) !important; } /* Remove breadcrumbs system-wide */ .breadcrumb { display: none !important; } /* Top nav icon sizing */ .ap-topnav-icon { font-size: 1.5rem !important; line-height: 1; } /* Rate code badge (Profile) */ .ap-ratecode-badge { font-size: 16px; padding: 0.45em 0.65em; } /* Create Reservation loading indicator */ :root[data-theme="dark"] #ChartLoadingText { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border: 1px solid var(--bs-border-color) !important; box-shadow: none !important; } /* Sidebar toggle rail between nav and content */ #apSidebarRail { width: 42px; background-color: var(--ap-shell-bg) !important; display: flex; align-items: center; justify-content: center; /* No border between nav and rail */ border-left: none; border-right: 1px solid var(--ap-shell-border-color); border-top: 1px solid var(--ap-shell-border-color); z-index: 1040; transition: left 0.15s ease-in-out, background-color 0.15s ease-in-out; } /* View Reservation: smooth collapse of top summary panels */ #MainForm #collapseBarDiv { cursor: pointer; } /* When the top summary panels are collapsed, prevent the bar's inline negative margin from pulling it up over the 'View Reservations' heading. */ #MainForm #collapseBarDiv.ap-top-collapsed { margin-top: 12px !important; } #MainForm .ap-top-panels { overflow: hidden; transition: max-height 0.6s ease, opacity 0.6s ease, margin-bottom 0.6s ease; } #MainForm .ap-top-panels.ap-collapsed { max-height: 0; opacity: 0; margin-bottom: 0 !important; pointer-events: none; } /* Rail is part of the dark shell in both themes */ /* Match top border line at top of sidenav menu */ #Searchablenavbar { border-top: 1px solid var(--ap-shell-border-color); } /* Ensure the left nav edge matches the rail border */ #layoutSidenav_nav { /* No border between nav and rail */ border-right: none; } /* Ensure rail is on the RIGHT of the sidenav (SB Admin fixed layout) */ .sb-nav-fixed #apSidebarRail { position: fixed; top: 56px; bottom: 0; left: 225px; } .sb-nav-fixed.sb-sidenav-toggled #apSidebarRail { left: 0; } /* Reserve space so rail does not overlap content on desktop */ @media (min-width: 992px) { .sb-nav-fixed #layoutSidenav #layoutSidenav_content { --ap-content-offset: calc(225px + 42px); padding-left: calc(225px + 42px) !important; transition: padding-left 0.15s ease-in-out; } .sb-nav-fixed.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content { --ap-content-offset: 42px; padding-left: 42px !important; transition: padding-left 0.15s ease-in-out; } /* SB Admin shifts content left when toggled; cancel that so the rail never overlaps MainForm/footer */ .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content { margin-left: 0 !important; transition: margin-left 0.15s ease-in-out, padding-left 0.15s ease-in-out; } } /* Footer: extend background into the reserved left offset area (otherwise the parent's light background shows as a vertical strip). */ #MainFooter { position: relative; margin-left: calc(-1 * var(--ap-content-offset, 0px)); width: calc(100% + var(--ap-content-offset, 0px)); } /* On small screens keep the rail accessible (manual-only toggle). */ @media (max-width: 767.98px) { .sb-nav-fixed #apSidebarRail { left: 0; } } /* Tablet widths: keep the left sidebar available (avoid the 992/991 "disappearing" switch) */ @media (min-width: 768px) and (max-width: 991.98px) { #layoutSidenav #layoutSidenav_nav { transform: translateX(0) !important; } #layoutSidenav #layoutSidenav_content { margin-left: 0 !important; } /* In this range, treat toggled as "collapsed" like desktop */ .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav { transform: translateX(-225px) !important; } .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before { display: none !important; } } #apSidebarRail button { border: none; background: transparent; color: rgba(255, 255, 255, 0.7); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; } #apSidebarToggleIcon { display: inline-block; font-size: 22px; line-height: 1; font-weight: 700; user-select: none; } #apSidebarRail button:hover, #apSidebarRail button:focus { background-color: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.9); } /* Create Reservation availability table: dark theme fixes */ :root[data-theme="dark"] #clickSelectTable { background-color: var(--bs-gray-900); color: var(--bs-gray-100); } :root[data-theme="dark"] #clickSelectTable th, :root[data-theme="dark"] #clickSelectTable td { border-color: var(--bs-border-color) !important; } /* Top row headings */ :root[data-theme="dark"] #clickSelectTable th.TableHeading { background-color: var(--bs-gray-800) !important; color: var(--bs-gray-100) !important; } /* Left column room names */ :root[data-theme="dark"] #clickSelectTable th.RoomTypes { background-color: var(--bs-gray-800) !important; color: var(--bs-gray-100) !important; } /* Keep cells readable without breaking inline JS coloring */ :root[data-theme="dark"] #clickSelectTable td { background-color: transparent; color: var(--bs-gray-100); } /* Create Reservation: keep weekend columns green in dark mode */ :root[data-theme="dark"] #clickSelectTable td.WeekendDate { background-color: #90ee90; color: #0b1b0b; } /* ------------------------------ View Reservations (DataTables) ------------------------------ */ :root[data-theme="dark"] #MainForm .container-fluid, :root[data-theme="dark"] #MainForm { color: var(--bs-gray-100); } /* Cards used by Models/ViewResTable.php */ :root[data-theme="dark"] #MainForm .card { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; box-shadow: none !important; } :root[data-theme="dark"] #MainForm .card h3, :root[data-theme="dark"] #MainForm .card h5, :root[data-theme="dark"] #MainForm h1, :root[data-theme="dark"] #MainForm h2, :root[data-theme="dark"] #MainForm h3, :root[data-theme="dark"] #MainForm h4, :root[data-theme="dark"] #MainForm h5 { color: var(--bs-gray-100) !important; } /* Search + radio controls */ :root[data-theme="dark"] #MainForm .radio-option, :root[data-theme="dark"] #MainForm .search-container button, :root[data-theme="dark"] #MainForm .select-dropdown { background-color: var(--bs-gray-900) !important; border-color: var(--bs-border-color) !important; } :root[data-theme="dark"] #MainForm .radio-option label, :root[data-theme="dark"] #MainForm .radio-container label { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] #MainForm .search-container input, :root[data-theme="dark"] #MainForm #searchBox { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; } :root[data-theme="dark"] #MainForm .search-container button svg { fill: rgba(255, 255, 255, 0.7) !important; } /* Buttons that are styled as white in the embedded stylesheet */ :root[data-theme="dark"] #MainForm .btn-success, :root[data-theme="dark"] #MainForm #btnViewAll { background-color: var(--bs-gray-800) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; } /* Dropdown options */ :root[data-theme="dark"] #MainForm select option { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; } /* DataTables core */ :root[data-theme="dark"] #MainForm table.dataTable, :root[data-theme="dark"] #MainForm table.dataTable.display { background-color: transparent !important; color: var(--bs-gray-100) !important; } :root[data-theme="dark"] #MainForm table.dataTable thead th, :root[data-theme="dark"] #MainForm table.dataTable thead td { background-color: var(--bs-gray-800) !important; color: var(--bs-gray-100) !important; border-bottom-color: var(--bs-border-color) !important; } :root[data-theme="dark"] #MainForm table.dataTable tbody td { background-color: transparent !important; color: var(--bs-gray-100) !important; border-top-color: var(--bs-border-color) !important; } :root[data-theme="dark"] #MainForm table.dataTable.stripe > tbody > tr.odd > *, :root[data-theme="dark"] #MainForm table.dataTable.display > tbody > tr.odd > * { background-color: rgba(255, 255, 255, 0.03) !important; } /* DataTables controls */ :root[data-theme="dark"] #MainForm .dataTables_wrapper, :root[data-theme="dark"] #MainForm .dataTables_wrapper .dataTables_info, :root[data-theme="dark"] #MainForm .dataTables_wrapper .dataTables_length, :root[data-theme="dark"] #MainForm .dataTables_wrapper .dataTables_filter, :root[data-theme="dark"] #MainForm .dataTables_wrapper .dataTables_paginate { color: rgba(255, 255, 255, 0.75) !important; } :root[data-theme="dark"] #MainForm .dataTables_wrapper .dataTables_filter input, :root[data-theme="dark"] #MainForm .dataTables_wrapper .dataTables_length select { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border: 1px solid var(--bs-border-color) !important; } :root[data-theme="dark"] #MainForm .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] #MainForm .dataTables_wrapper .dataTables_paginate .paginate_button.current, :root[data-theme="dark"] #MainForm .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--bs-border-color) !important; } /* ------------------------------ View Reservation details (Models/ViewFullRes.php / ViewGuestlist.php) ------------------------------ */ /* Override embedded stylesheet that forces disabled to white */ :root[data-theme="dark"] #MainForm :disabled { background-color: var(--bs-gray-900) !important; color: rgba(255, 255, 255, 0.85) !important; border-color: var(--bs-border-color) !important; } /* Tabs + pages */ :root[data-theme="dark"] #MainForm .page, :root[data-theme="dark"] #MainForm .tab, :root[data-theme="dark"] #MainForm .tab-bar, :root[data-theme="dark"] #MainForm .tab-bar1 { background: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; } /* Main panels that are inline-styled to light backgrounds */ :root[data-theme="dark"] #MainForm #bookNoTab, :root[data-theme="dark"] #MainForm #roomsRatesContainer, :root[data-theme="dark"] #MainForm #notesContainer, :root[data-theme="dark"] #MainForm #extrasContainer, :root[data-theme="dark"] #MainForm #contactContainer, :root[data-theme="dark"] #MainForm #bookingsContainer, :root[data-theme="dark"] #MainForm #guestContainer, :root[data-theme="dark"] #MainForm #totalsContent { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; } :root[data-theme="dark"] #MainForm #collapseBar, :root[data-theme="dark"] #MainForm #collapseBarDiv, :root[data-theme="dark"] #MainForm .dropdown-btn { background-color: var(--bs-gray-800) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; } :root[data-theme="dark"] #MainForm #totalsContent span, :root[data-theme="dark"] #MainForm #totalsContent label { color: var(--bs-gray-100) !important; } /* Tables inside the details view */ :root[data-theme="dark"] #MainForm #roomsRatesContainer .table, :root[data-theme="dark"] #MainForm #bookingsContainer .table, :root[data-theme="dark"] #MainForm #notesContainer .table, :root[data-theme="dark"] #MainForm #extrasContainer .table { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] #MainForm #roomsRatesContainer .table th, :root[data-theme="dark"] #MainForm #bookingsContainer .table th, :root[data-theme="dark"] #MainForm #extrasContainer .table th { background-color: var(--bs-gray-800) !important; color: var(--bs-gray-100) !important; } :root[data-theme="dark"] #MainForm #roomsRatesContainer .table td, :root[data-theme="dark"] #MainForm #bookingsContainer .table td, :root[data-theme="dark"] #MainForm #extrasContainer .table td { background-color: transparent !important; } /* ViewFullRes: top 4 summary panels (Account/Detail/References/Res Info) */ :root[data-theme="dark"] #MainForm #form-group1 > div > div { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; box-shadow: none !important; } :root[data-theme="dark"] #MainForm #form-group1 h5, :root[data-theme="dark"] #MainForm #form-group1 label { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] #MainForm #form-group1 .form-control, :root[data-theme="dark"] #MainForm #form-group1 .form-select, :root[data-theme="dark"] #MainForm #form-group1 input, :root[data-theme="dark"] #MainForm #form-group1 select { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; } /* Contact tab: labels are rendered as .form-control with inline light backgrounds */ :root[data-theme="dark"] #MainForm #contactContainer h5, :root[data-theme="dark"] #MainForm #contactContainer label { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] #MainForm #contactContainer .form-control { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border: 1px solid var(--bs-border-color) !important; } /* ViewFullRes: main container background */ :root[data-theme="dark"] #MainForm #mainContainer { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; box-shadow: none !important; } /* Guest List button should match trapezoid tabs in dark mode */ :root[data-theme="dark"] #MainForm #guestList { background-color: var(--bs-gray-800) !important; border-color: var(--bs-border-color) !important; } :root[data-theme="dark"] #MainForm #guestList label, :root[data-theme="dark"] #MainForm #guestList * { color: var(--bs-gray-100) !important; } /* Guest List pill hover (both themes) */ #MainForm #guestList { transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } #MainForm #guestList:hover { background-color: #1890ff !important; border-color: #1890ff !important; transform: translateY(-1px); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.25) !important; } #MainForm #guestList:hover label, #MainForm #guestList:hover * { color: #fff !important; } /* Totals collapse rail hover */ #MainForm #collapseBar { transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background-color 0.15s ease; } #MainForm #collapseBar:hover { background-color: #1890ff !important; transform: scale(1.05); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.25) !important; filter: brightness(1.03); } /* Totals collapse arrow should be white in light mode */ :root[data-theme="light"] #MainForm #collapseBar, :root[data-theme="light"] #MainForm #collapseBar * { color: #fff !important; } :root[data-theme="light"] #MainForm #collapseBar svg { fill: #fff !important; } /* Prevent totals column from stretching/jumping with tab content height */ #MainForm #total-bookContainer { align-items: flex-start !important; } #MainForm #totalsContainer { align-self: flex-start; } /* Totals text/input colors */ :root[data-theme="dark"] #MainForm #totalsContent, :root[data-theme="dark"] #MainForm #totalsContent * { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] #MainForm #totalsContent .form-control, :root[data-theme="dark"] #MainForm #totalsContent input, :root[data-theme="dark"] #MainForm #totalsContent textarea, :root[data-theme="dark"] #MainForm #totalsContent select { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; } /* ViewFullRes: trapezoid tabs and half-circle control use hardcoded light colors */ :root[data-theme="dark"] #MainForm .trapezoid { background: var(--bs-gray-800) !important; color: var(--bs-gray-100) !important; } :root[data-theme="dark"] #MainForm .trapezoid:hover { background-image: linear-gradient(to bottom, rgba(24, 144, 255, 0.22), rgba(24, 144, 255, 0)) !important; color: #1890ff !important; } :root[data-theme="dark"] #MainForm .trapezoid.active { background-image: linear-gradient(to bottom, rgba(24, 144, 255, 0.55), rgba(24, 144, 255, 0)) !important; background-color: var(--bs-gray-800) !important; color: var(--bs-gray-100) !important; } /* Tabs hover (Rooms/Rates/Notes/etc) */ #MainForm .tab { transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } #MainForm .tab:hover { background-color: rgba(24, 144, 255, 0.10) !important; color: #1890ff !important; transform: translateY(-1px); } :root[data-theme="dark"] #MainForm .tab:hover { background-color: rgba(24, 144, 255, 0.14) !important; color: #1890ff !important; } :root[data-theme="dark"] #MainForm .rotated-half-circle { background-color: var(--bs-gray-900) !important; border-color: var(--bs-border-color) !important; } /* Requested refresh button sizing (Create Reservation) */ #refreshButton.refresh-button { width: 25px !important; height: 25px !important; } #refreshButton.refresh-button i { font-size: 0.9em; } /* SweetAlert2 popups (dark mode) */ :root[data-theme="dark"] .swal2-popup { background: var(--bs-gray-800) !important; color: var(--bs-gray-100) !important; border: 1px solid var(--bs-border-color) !important; } /* Force custom HTML content to inherit dark text (covers inline light styles) */ :root[data-theme="dark"] .swal2-html-container, :root[data-theme="dark"] .swal2-html-container * { color: var(--bs-gray-100) !important; } /* Common light backgrounds used in CreateRes popups */ :root[data-theme="dark"] .swal2-html-container .container { background: var(--bs-gray-900) !important; border-color: var(--bs-border-color) !important; } :root[data-theme="dark"] .swal2-html-container p { background: var(--bs-gray-900) !important; border-color: var(--bs-border-color) !important; box-shadow: none !important; } :root[data-theme="dark"] .swal2-html-container .bkaccordion-item { background-color: var(--bs-gray-800) !important; border-color: var(--bs-border-color) !important; } :root[data-theme="dark"] .swal2-html-container .bkaccordion-content { background-color: var(--bs-gray-900) !important; border-top-color: var(--bs-border-color) !important; } :root[data-theme="dark"] .swal2-html-container .table { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .swal2-html-container .table th { background-color: var(--bs-gray-800) !important; } :root[data-theme="dark"] .swal2-html-container .table td { background-color: var(--bs-gray-900) !important; } /* Bootstrap inputs inside popups (these don't always have swal2-* classes) */ :root[data-theme="dark"] .swal2-popup .form-control, :root[data-theme="dark"] .swal2-popup .form-select { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; } :root[data-theme="dark"] .swal2-title, :root[data-theme="dark"] .swal2-html-container, :root[data-theme="dark"] .swal2-content { color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .swal2-input, :root[data-theme="dark"] .swal2-textarea, :root[data-theme="dark"] .swal2-select, :root[data-theme="dark"] .swal2-file, :root[data-theme="dark"] .swal2-range { background-color: var(--bs-gray-900) !important; color: var(--bs-gray-100) !important; border-color: var(--bs-border-color) !important; } :root[data-theme="dark"] .swal2-validation-message { background: rgba(255, 255, 255, 0.06) !important; color: var(--bs-gray-100) !important; } :root[data-theme="dark"] .swal2-close { color: rgba(255, 255, 255, 0.8) !important; } :root[data-theme="dark"] .swal2-footer { border-top-color: var(--bs-border-color) !important; } :root[data-theme="dark"] .breadcrumb-item.active { color: rgba(255, 255, 255, 0.7); }