.pointer{
    cursor: pointer;
}

.columnMinWidth {
    width: 0 !important; min-width: fit-content !important;
}


[data-bs-theme="light"] .modal-header.custom-headerfooter, [data-bs-theme="light"] .modal-footer.custom-headerfooter {
    background-color: #f8f9fa; /* Bootstrap's bg-light */
    color: #000;
}

/* Dark theme */
[data-bs-theme="dark"] .modal-header.custom-headerfooter, [data-bs-theme="dark"] .modal-footer.custom-headerfooter {
    background-color: #0b1727; /* Slightly lighter than modal background */
    color: #0d6efd; /* Bootstrap primary blue or use #fff for white text */
}

/* Falcon's top-nav search box isn't sized for phones - its .search-box/.search-input sit inside a non-flex
   container (<ul class="navbar-nav ... d-block">), so nothing ever shrinks them to fit. At a 375px viewport it
   measures ~336px wide, which pushes the avatar/account icon on the right completely off-screen and drags the
   whole page's scrollable width out past the viewport - the horizontal scroll (and modals not filling the screen
   properly, since the page behind them can still scroll sideways) traces back to this one element. Capping its
   width on small screens fixes both. */
@media (max-width: 575.98px) {
    .search-box {
        width: 8rem;
        min-width: 250px;
    }
    .search-box .search-input {
        width: 100%;
        min-width: 0;
    }
}

/* Defensive backstop - the page itself should never need to scroll sideways, so if anything else ever overflows
   like the search box did, this stops it silently making the whole app horizontally scrollable again. */
html, body {
    overflow-x: hidden;
}

/* Menu group chevron (MainMenu.html / AdminMainMenu.html): points right while the group is closed and turns to point
   up when it's open. Bootstrap's collapse keeps aria-expanded on the toggle link up to date, so this is CSS only. */
.nav-link-chevron {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.nav-link[aria-expanded="true"] > div > .nav-link-chevron {
    transform: translateY(0.12rem) rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
    .nav-link-chevron {
        transition: none;
    }
}

/* Main menu status bar (MainMenu.html #nueStatusBar, setStatusBarItem() in SystemFunctions.js): one slim line fixed to
   the bottom of the window, full width like a desktop status bar, replacing Falcon's two tall footers. Content and the
   sidebar keep just enough room at the bottom so nothing ends up hidden behind it. */
.nue-statusbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1025;
    height: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    border-top: 1px solid #d8e2ef;
    background-color: #f9fafd;
    color: #5e6e82;
}
[data-bs-theme="dark"] .nue-statusbar {
    border-top-color: #232e3c;
    background-color: #0b1727;
    color: #9da9bb;
}
.nue-statusbar a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
}
.nue-statusbar a:hover {
    text-decoration-color: currentColor;
}
.nue-sb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    height: 100%;
    padding: 0 0.5rem;
    border-radius: 0.25rem;
}
.nue-sb-item + .nue-sb-item:not(.ms-auto),
.nue-sb-custom:not(:empty) {
    border-left: 1px solid rgba(128, 128, 128, 0.25);
}
.nue-sb-custom {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}
.nue-sb-text {
    overflow: hidden;
    text-overflow: ellipsis;
}
.nue-sb-link {
    cursor: pointer;
}
.nue-sb-link:hover, .nue-sb-link:focus-visible {
    background-color: rgba(128, 128, 128, 0.12);
    outline: none;
}
.nue-sb-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #00d27a;
    flex-shrink: 0;
}
.nue-sb-offline .nue-sb-dot { background-color: #e63757; }
.nue-sb-offline { color: #e63757; }
.nue-sb-checking .nue-sb-dot { background-color: #b6c1d2; }
.nue-sb-warning-state .nue-sb-dot { background-color: #f5803e; }
.nue-sb-warning-state { color: #d9822b; }
/* Not connected: the whole status stays visible on phones (its words are hidden there when all is well). */
.nue-sb-offline .nue-sb-text, .nue-sb-warning-state .nue-sb-text { display: inline !important; }
.nue-sb-primary { color: #2c7be5; }
.nue-sb-success { color: #00b86b; }
.nue-sb-warning { color: #d9822b; }
.nue-sb-danger { color: #e63757; }
/* Room for the bar: Falcon reserves ~6rem at the bottom of .content for its own footer. */
.content.nue-has-statusbar {
    padding-bottom: 2.25rem !important;
}
/* Sidebar panel (Falcon template untouched - these override its sizes from here). At lg+ Falcon puts an empty 2rem
   spacer above the menu (plus a -0.3125rem pull-up) and sizes it as 100vh minus the top bar, leaving it 12px below the
   search box and a wide gap above the status bar. This lines its top up with the search box ((top bar - 39px search box)
   / 2 = 15px from the top) and ends it the same 15px above the status bar. */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg .navbar-collapse {
        margin-top: calc(-2rem + 15px);
    }
    .navbar-vertical.navbar-expand-lg .navbar-collapse,
    .navbar-vertical.navbar-expand-lg .navbar-vertical-content {
        height: calc(100vh - 1.75rem - 30px) !important;
        max-height: calc(100vh - 1.75rem - 30px) !important;
    }
}
@media print {
    .nue-statusbar { display: none !important; }
}

/* Sliders on touch screens (see the touch-range handler in SystemFunctions.js): the page mustn't scroll or zoom when
   a finger drags along one, and the thumb is made finger-sized. */
input[type="range"] {
    touch-action: none;
}
@media (pointer: coarse) {
    .form-range {
        height: 2rem;
    }
    .form-range::-webkit-slider-thumb {
        width: 1.5rem;
        height: 1.5rem;
        margin-top: -0.5rem;
    }
    .form-range::-moz-range-thumb {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Report rows that open something (ReportTable.RowLink - e.g. Transaction Search -> transaction breakdown). */
.report-row-link {
    cursor: pointer;
}
.report-row-link:focus-visible {
    outline: 2px solid var(--falcon-primary, #2c7be5);
    outline-offset: -2px;
}

/* Bootstrap 5.0 dropdowns sit at z-index 1000, under Falcon's main menu (1019) and top bar (1020), so a dropdown that
   overlaps the menu was hidden behind it. 1030 clears those and the status bar (1025) but stays below modals (1040+). */
.dropdown-menu {
    z-index: 1030;
}

/* Statistics report shell (see Sections/Statistics/ReportViewer.cs) - hides the app chrome (navbar, Back/Print
   buttons, filter builder) when the user actually prints or "Save As PDF"s a report, leaving just the report's
   own header + body, matching what the desktop got for free by rendering reports into a bare browser window. */
@media print {
    .navbar-vertical, .report-no-print {
        display: none !important;
    }
    .report-print-header {
        display: block !important;
    }
    .content {
        margin-left: 0 !important;
    }
    /* Charts print as the server's SVG (see ReportCharts.cs) - a Chart.js canvas prints at screen resolution and size */
    .report-chart-live {
        display: none !important;
    }
    .report-chart-static {
        display: block !important;
    }
    .report-chart {
        break-inside: avoid;
    }
}
/* Dialogs on iPad / iPhone Safari: a scroll that reaches the end of a dialog carried on into the page behind it
   ("scroll chaining"), and Safari used to ignore Bootstrap's overflow: hidden on the body. Stop the chain at the dialog
   and its scrolling lists, and lock the page itself while a dialog is open. */
.modal, .modal-body, .modal .overflow-auto {
    overscroll-behavior: contain;
}
html:has(body.modal-open), body.modal-open {
    overflow: hidden;
}

/* Product editor: the shortcut key list only for devices with a keyboard and mouse. */
@media (hover: none), (pointer: coarse) {
    .pe-shortcut-hint {
        display: none;
    }
}