/* Sidebar menu: hover and click effect (layout main-logged-in).
   Uses Bootstrap theme variables, so it follows light and dark mode. */
[wappler-role="sidebar-link"] {
  position: relative;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .1s ease;
}

[wappler-role="sidebar-link"] > .fa,
[wappler-role="sidebar-link"] > .bi {
  transition: transform .2s ease, color .2s ease;
}

/* Sidebar icons: one color and a fixed width so the labels line up */
.sidebar-icon {
  width: 1.25rem;
  flex-shrink: 0;
  text-align: center;
  font-size: 1.05rem;
  color: var(--bs-secondary-color);
}

/* Accent bar that grows in on the left */
[wappler-role="sidebar-link"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background-color: var(--bs-link-color);
  transform: scaleY(0);
  transition: transform .2s ease;
}

/* Hover */
[wappler-role="sidebar-link"]:not(.text-bg-primary):hover {
  background-color: rgba(var(--bs-primary-rgb), .08);
  color: var(--bs-link-color) !important;
}

[wappler-role="sidebar-link"]:not(.text-bg-primary):hover::before {
  transform: scaleY(1);
}

[wappler-role="sidebar-link"]:not(.text-bg-primary):hover > .fa,
[wappler-role="sidebar-link"]:not(.text-bg-primary):hover > .bi {
  color: var(--bs-link-color) !important;
}

[wappler-role="sidebar-link"]:hover > .fa,
[wappler-role="sidebar-link"]:hover > .bi {
  transform: translateX(2px);
}

[wappler-role="sidebar-link"].text-bg-primary:hover {
  box-shadow: 0 .35rem .9rem rgba(var(--bs-primary-rgb), .35);
}

/* Count badge on the selected item (Nov 7, 2026): white with blue text so it stays readable on the blue highlight. */
[wappler-role="sidebar-link"].text-bg-primary > .badge {
  background-color: #fff !important;
  color: var(--bs-primary-text-emphasis) !important;
}

/* Click */
[wappler-role="sidebar-link"]:active {
  transform: scale(.97);
}

[wappler-role="sidebar-link"]:not(.text-bg-primary):active {
  background-color: rgba(var(--bs-primary-rgb), .16);
}

/* Keyboard focus */
[wappler-role="sidebar-link"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35);
}

@media (prefers-reduced-motion: reduce) {
  [wappler-role="sidebar-link"],
  [wappler-role="sidebar-link"] > .fa,
  [wappler-role="sidebar-link"] > .bi,
  [wappler-role="sidebar-link"]::before {
    transition: none;
  }

  [wappler-role="sidebar-link"]:active,
  [wappler-role="sidebar-link"]:hover > .fa,
  [wappler-role="sidebar-link"]:hover > .bi {
    transform: none;
  }
}

/* Lets a flex or grid column shrink below its content's width, so wide
   tables scroll inside .table-responsive instead of widening the page.
   The layout's content area already uses this class. */
.min-w-0 {
  min-width: 0 !important;
}

/* Login screen (layout auth). The background image is set in the Admin
   Center; without one, a gradient in the app's blue is used. */
.auth-body {
  min-height: 100vh;
  background-color: #052c65;
}

.auth-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 40%, #052c65 100%);
  background-size: cover;
  background-position: center;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .18), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(255, 255, 255, .12), transparent 45%);
}

/* Darkens a photo slightly so the card stays readable */
.auth-overlay.auth-overlay-photo {
  background: linear-gradient(135deg, rgba(5, 44, 101, .55), rgba(0, 0, 0, .35));
}

.auth-main {
  position: relative;
  z-index: 1;
}

.auth-card {
  max-width: 27rem;
  background-color: rgba(var(--bs-body-bg-rgb), .93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.auth-logo {
  max-height: 5.5rem;
  max-width: 100%;
}

.auth-card .input-group-text {
  background-color: var(--bs-tertiary-bg);
}

.auth-footer {
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* Sidebar: the highlighted (current page) link keeps its icon readable */
[wappler-role="sidebar-link"].text-bg-primary > .fa,
[wappler-role="sidebar-link"].text-bg-primary > .bi {
  color: inherit !important;
}

/* Logo boxes: the space is reserved before the logo loads, so the sidebar
   menu and sign-in cards don't jump down when it appears. The logo fades in. */
.logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sidebar-logo-slot {
  height: 4.25rem;
}

.auth-logo-slot {
  height: 5.5rem;
}

.logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s ease;
}

.logo-img.logo-ready {
  opacity: 1;
}

/* Top bar user card: fixed width so it doesn't grow when the name loads,
   which used to push the search box sideways. Long names end in "…". */
.user-surface {
  width: 14rem;
  max-width: 100%;
}

.user-menu-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

/* Phones show the picture only, so the pill needs no fixed width. */
@media (max-width: 575.98px) {
  .user-surface {
    width: auto;
  }
}

/* Dark mode: Bootstrap's .table-light stays bright white, which made table headers
   glare and their muted labels unreadable. Use the dark theme's own soft surface. */
[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-tertiary-bg);
  --bs-table-hover-bg: var(--bs-tertiary-bg);
  --bs-table-active-bg: var(--bs-tertiary-bg);
}

/* Dark mode tidy-up (Nov 9, 2026). Every rule starts with [data-bs-theme="dark"], so light mode is untouched. */

/* Logo: its letters are dark and need white behind them, as in light mode. A plate, not an edited
   picture, so a logo uploaded in Admin Center gets it too. */
[data-bs-theme="dark"] .logo-img {
  background-color: #fff;
  padding: .25rem .5rem;
  border-radius: .75rem;
}

/* Boxes that stay bright: Bootstrap's bg-light and bg-white don't follow the theme. */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .text-bg-light {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}
/* QR codes must stay on white to scan. */
[data-bs-theme="dark"] #twofaLoginQr.bg-white,
[data-bs-theme="dark"] #twofaSettingsQr.bg-white {
  background-color: #fff !important;
}
[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: var(--bs-tertiary-bg);
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-color: var(--bs-body-color);
}
/* Large warning areas: softened. Small warning badges and buttons keep their color. */
[data-bs-theme="dark"] td.text-bg-warning,
[data-bs-theme="dark"] th.text-bg-warning,
[data-bs-theme="dark"] .modal-header.text-bg-warning {
  background-color: var(--bs-warning-bg-subtle) !important;
  color: var(--bs-warning-text-emphasis) !important;
}
[data-bs-theme="dark"] .modal-header.text-bg-warning .btn-close {
  filter: var(--bs-btn-close-white-filter);
}
/* Date picker pop-up */
[data-bs-theme="dark"] .daterangepicker {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .daterangepicker:before,
[data-bs-theme="dark"] .daterangepicker:after {
  border-bottom-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .daterangepicker .calendar-table {
  background-color: transparent;
  border-color: transparent;
}
[data-bs-theme="dark"] .daterangepicker td.off,
[data-bs-theme="dark"] .daterangepicker td.off.in-range {
  background-color: transparent;
  color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .daterangepicker td.available:hover,
[data-bs-theme="dark"] .daterangepicker th.available:hover {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .daterangepicker td.in-range {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .daterangepicker .calendar-table .next span,
[data-bs-theme="dark"] .daterangepicker .calendar-table .prev span {
  border-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .daterangepicker select.monthselect,
[data-bs-theme="dark"] .daterangepicker select.yearselect,
[data-bs-theme="dark"] .daterangepicker select.hourselect,
[data-bs-theme="dark"] .daterangepicker select.minuteselect,
[data-bs-theme="dark"] .daterangepicker select.ampmselect,
[data-bs-theme="dark"] .daterangepicker .drp-buttons .cancelBtn {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .daterangepicker .drp-buttons {
  border-top-color: var(--bs-border-color);
}

/* Colored table rows, such as the Total rows on the lease page */
[data-bs-theme="dark"] .table-primary {
  --bs-table-bg: var(--bs-primary-bg-subtle);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-primary-bg-subtle);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-primary-bg-subtle);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-active-bg: var(--bs-primary-bg-subtle);
  --bs-table-active-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table-secondary {
  --bs-table-bg: var(--bs-secondary-bg-subtle);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-secondary-bg-subtle);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-secondary-bg-subtle);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-active-bg: var(--bs-secondary-bg-subtle);
  --bs-table-active-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table-success {
  --bs-table-bg: var(--bs-success-bg-subtle);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-success-bg-subtle);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-success-bg-subtle);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-active-bg: var(--bs-success-bg-subtle);
  --bs-table-active-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table-danger {
  --bs-table-bg: var(--bs-danger-bg-subtle);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-danger-bg-subtle);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-danger-bg-subtle);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-active-bg: var(--bs-danger-bg-subtle);
  --bs-table-active-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table-warning {
  --bs-table-bg: var(--bs-warning-bg-subtle);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-warning-bg-subtle);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-warning-bg-subtle);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-active-bg: var(--bs-warning-bg-subtle);
  --bs-table-active-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table-info {
  --bs-table-bg: var(--bs-info-bg-subtle);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-info-bg-subtle);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-info-bg-subtle);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-active-bg: var(--bs-info-bg-subtle);
  --bs-table-active-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table-success > * > *,
[data-bs-theme="dark"] .table-danger > * > * {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .form-control:not(:focus):not(.is-invalid):not(.is-valid),
[data-bs-theme="dark"] .form-select:not(:focus):not(.is-invalid):not(.is-valid) {
  border-color: var(--bs-border-color);
}

/* Colors set inside individual pages */
[data-bs-theme="dark"] body {
  background-color: var(--bs-body-bg);
}
[data-bs-theme="dark"] .table tbody td {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table-light th {
  background-color: var(--bs-tertiary-bg);
  border-top-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .hover-row:hover {
  background-color: rgba(255, 255, 255, .04);
}
[data-bs-theme="dark"] .form-floating > label {
  color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .alert-danger {
  background-color: var(--bs-danger-bg-subtle);
}

/* Text that stays too dark */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black {
  color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .text-primary { color: var(--bs-primary-text-emphasis) !important; }
[data-bs-theme="dark"] .text-secondary { color: var(--bs-secondary-color) !important; }
[data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; }
[data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; }
[data-bs-theme="dark"] .text-warning { color: var(--bs-warning-text-emphasis) !important; }
[data-bs-theme="dark"] .text-info { color: var(--bs-info-text-emphasis) !important; }
/* A colored text class on a filled badge or menu keeps its own contrast. */
[data-bs-theme="dark"] .text-bg-primary .text-primary,
[data-bs-theme="dark"] .bg-white.text-primary {
  color: var(--bs-primary-text-emphasis) !important;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #6ea8fe;
  --bs-btn-border-color: #6ea8fe;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #adb5bd;
  --bs-btn-border-color: #6c757d;
}
[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #ea868f;
  --bs-btn-border-color: #ea868f;
}
[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: #75b798;
  --bs-btn-border-color: #75b798;
}
/* Selected sidebar item: its count badge is white, so its number has to stay dark. */
[data-bs-theme="dark"] [wappler-role="sidebar-link"].text-bg-primary > .badge {
  color: #052c65 !important;
}

/* Smooth page changes (View Transitions). Supported browsers (Chrome, Edge,
   Safari) fade the page content from one page to the next instead of flashing.
   The sidebar and top bar are left out of the fade: the old ones stay on screen
   for the quarter second it takes, while the new page's logo, counts and name
   load behind them. Browsers without support just load pages normally.
   To turn this off, remove the <style> line from both layouts. */
/* The rule that turns this on, @view-transition { navigation: auto; }, is in
   the <head> of main-logged-in.ejs and auth.ejs, before any script. */

aside[wappler-role="sidebar"] {
  view-transition-name: app-sidebar;
}

header[wappler-role="toolbar"] {
  view-transition-name: app-topbar;
  /* view-transition-name makes the top bar its own layer, so its dropdowns
     (global search, notifications, user menu) could only stack inside it and
     the page content below painted over them. Lifting the whole top bar above
     the content fixes that. 1020 is Bootstrap's sticky level, below popups (1055). */
  position: relative;
  z-index: 1020;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .25s;
}

::view-transition-group(app-sidebar),
::view-transition-group(app-topbar) {
  animation: none;
}

::view-transition-old(app-sidebar),
::view-transition-old(app-topbar) {
  animation: none;
  opacity: 1;
}

/* SwordChat chat bubble (Nov 7, 2026): left out of the page fade, so it doesn't
   show through the login page for a moment after signing out. On the next
   signed-in page it appears again once that page has its chat pass. */
swordchat-widget {
  view-transition-name: swordchat-bubble;
}

::view-transition-group(swordchat-bubble),
::view-transition-old(swordchat-bubble),
::view-transition-new(swordchat-bubble) {
  animation: none;
}

::view-transition-old(swordchat-bubble) {
  display: none;
}

::view-transition-new(app-sidebar),
::view-transition-new(app-topbar) {
  animation: none;
  opacity: 0;
}


/* Printing (Print / Save PDF buttons): print only the report itself.
   Buttons, paging, page navbars, the sidebar and the top bar are left out,
   colors and badges still print, and wide tables aren't cut off. */
@media print {
  aside[wappler-role="sidebar"],
  header[wappler-role="toolbar"],
  [wappler-role="navbar"],
  .btn,
  .pagination,
  .dmx-notifications,
  .no-print {
    display: none !important;
  }

  html,
  body,
  main#content {
    background: #fff !important;
  }

  main#content {
    padding: 0 !important;
  }

  .table-responsive {
    overflow: visible !important;
  }

  .card {
    box-shadow: none !important;
  }

  thead {
    display: table-header-group;
  }

  tr {
    break-inside: avoid;
  }

  a {
    text-decoration: none !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* data-report-print="#id": print only that section (Complex page P&L sections).
     report-export.js marks the section's parents with .report-print-path; everything else is left out. */
  body.report-print-section .report-print-path > :not(.report-print-path):not(.report-print-target) {
    display: none !important;
  }
}


/* Phone and tablet menu (Nov 6, 2026, R14): below 992px the sidebar is hidden; the top bar's menu
   button sets sidebarOpen, which adds .sidebar-open and slides the sidebar in over the page. */
@media (max-width: 991.98px) {
  aside[wappler-role="sidebar"].sidebar-open {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1045;
    overflow-y: auto;
    max-width: 85vw;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1044;
    background-color: rgba(0, 0, 0, .45);
  }
}

/* Page number buttons wrap onto a second line instead of making the page scroll sideways
   on narrow screens (Nov 6, 2026, R14). */
.pagination {
  flex-wrap: wrap;
}

/* Record pictures (Nov 8, 2026): the picture area on complex, apartment, tenant and vendor pages,
   and the small thumbnails in lists. A colored icon shows until a picture is added. */
.record-picture-img,
.record-picture-empty {
  width: 96px;
  height: 96px;
}

.record-picture-empty .bi {
  font-size: 2.5rem;
}

.record-thumb,
.record-thumb-empty {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.record-thumb-empty .bi {
  font-size: 1.1rem;
}