/*
 * Small app-specific overrides on top of the vendored NOWA theme.
 * Kept separate from the theme's own CSS files so theme updates don't
 * clobber it and its intent stays easy to find.
 */

/*
 * The theme's sticky.js measures spacer height via $(".sticky").innerHeight(),
 * which — because both the sidebar wrapper and the fixed .main-header share
 * the "sticky" class — reads the sidebar's height instead of the header's,
 * leaving the real spacer after .main-header at 0px. That hides all page
 * content (titles, buttons, cards) behind the fixed 64px header. Push the
 * content area down by the header's own height (64px) plus its intended
 * 20px bottom margin instead of relying on that JS-computed spacer.
 *
 * !important is required here: style.css itself has
 * `@media (min-width: 992px) { .main-content { padding-top: 0 !important; } }`
 * (presumably meant to avoid double-spacing when the JS spacer above works
 * correctly). The two-class selector below is more specific than that single-
 * class rule, so it wins even between two `!important` declarations.
 */
.main-content.app-content {
    padding-top: 84px !important;
}

/*
 * AJAX activity overlay toggled by every getData()/save/delete call across
 * the app's custom JS (public/assets/js/custom/**) via
 * $('.loader-wrapper').removeClass('d-none') / .addClass('d-none'). Sits
 * above Bootstrap modals (z-index 1055) and their backdrops (1050) so it
 * stays visible while a modal-based form is submitting. Reuses the same
 * loader.svg as the theme's #global-loader boot splash so there's only one
 * loading visual in the app, not two different ones.
 */
.loader-wrapper {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
}

.loader-wrapper img {
    width: 115px;
    height: 115px;
}

/*
 * Dashboard KPI stat-tile icon badge (followups/dashboard.blade.php). The
 * theme's own .icon.icon-shape rule hardcodes a fixed navy background on the
 * <i> itself, which would fight the per-status bg-*-transparent color each
 * tile needs, so this is its own small, differently-named class.
 */
.stat-tile-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 1.25rem;
}

/*
 * `col-xl-2-4` (a 1/5-width column, for a 5-across KPI row) is referenced in
 * followups/dashboard.blade.php but was never actually defined anywhere in
 * the vendored theme - the class was silently ignored, so those tiles fell
 * back to `col-md-6` (2 per row) on desktop too. Bootstrap's 12-column grid
 * has no native 1/5 split, so this fills the gap the theme was expected to.
 */
@media (min-width: 1200px) {
    .col-xl-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/*
 * Monospaced cells for machine-generated values - IPs, instance names and
 * Windows paths - used across every binlog viewer partial. Lives here rather
 * than in a page's own <style> block because the same class is rendered from
 * five different partials, including AJAX-injected ones.
 */
.bl-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
}

/*
 * Long Windows paths (src_path/dst_path/full_path_file) would otherwise blow
 * the table width out on `text-nowrap` tables. Truncate with an ellipsis and
 * keep the full value in the cell's title attribute.
 */
.bl-path {
    display: inline-block;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

/*
 * Summary strip above the binlog/FileZilla viewer tables, showing the totals
 * for the CURRENT filter rather than for the whole table.
 */
.bl-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: .75rem 1rem;
    border-radius: .4rem;
    background: rgba(88, 103, 221, .07);
    margin-bottom: 1rem;
}

.bl-summary .bl-summary-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
}

.bl-summary .bl-summary-value {
    font-size: 1.05rem;
    font-weight: 600;
}