/* Header: full-width bottom border; nav-tabs border is suppressed to avoid a partial line */
header {
    border-bottom: 1px solid var(--bs-border-color);
}

header .nav-tabs {
    border-bottom: none;
}

header .nav-tabs .nav-link.active {
    border-bottom-color: transparent;
}

/* Nav links: use body colour (adapts to both themes) */
.nav {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-link-color-rgb: var(--bs-body-color-rgb);
}

/* ── Light-mode-only Bootstrap token overrides ─────────────────────────── */
[data-bs-theme="light"] {
    --bs-primary: #ccc;

    .btn-outline-primary {
        --bs-btn-bg: #fff;
        --bs-btn-color: #000;
        --bs-btn-border-color: #ccc;
        --bs-btn-hover-bg: #ccc;
        --bs-btn-hover-border-color: #ccc;
        --bs-btn-active-bg: #ccc;
        --bs-btn-active-border-color: #ccc;
        --bs-btn-active-color: #000;
        --bs-gradient: linear-gradient(#000 0%, #fff 100%);
        --bs-btn-disabled-color: #000;
        --bs-btn-disabled-border-color: #000;
    }

    /* light grey background for active nav links */
    .nav-tabs .nav-link.active {
        --bs-nav-tabs-link-active-bg: var(--bs-tertiary-bg);
        font-weight: bold;
    }
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    opacity: 0.3;
}

textarea {
    resize: none;
}

/* Range input thumb — neutral across both themes */
input[type='range'] {
    accent-color: var(--bs-secondary-color);
}
input[type='range']::-webkit-slider-thumb {
    background: var(--bs-secondary-color);
}
input[type='range']::-moz-range-thumb {
    background: var(--bs-secondary-color);
    border: none;
}

code,
pre,
.code {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.h5,
.h6 {
    text-transform: uppercase;
    font-weight: bold;
}

/* graph */

/* View Transitions for chart updates: simple crossfade */
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }

::view-transition-old(nfsen-chart) { animation: 150ms ease-in  both fade-out; }
::view-transition-new(nfsen-chart) { animation: 250ms ease-out both fade-in;  }

/* View Transitions for tab switching */
main.tab-content {
    view-transition-name: tab-content;
}

::view-transition-old(tab-content) { animation: 100ms ease-in  both fade-out; }
::view-transition-new(tab-content) { animation: 200ms ease-out both fade-in;  }

#flowDiv .dygraph-title {
    font-size: 1.5rem;
    text-transform: uppercase;
}

#flowDiv .dygraph-ylabel {
    font-size: 1rem;
}

#legend span {
    padding: 0.2rem;
}

#legend span.highlight {
    background-color: var(--bs-secondary-bg);
}

#series label {
    display: block;
}

#viewList li h4 {
    margin-left: 10px;
}

/* graph options */

.accordion h4:after {
    content: '\25B2';
    float: right;
}

.accordion h4.collapsed:after {
    content: '\25BC';
}

/* flows */
.subnet-input:before {
    content: '/';
    width: auto;
    position: absolute;
    font-size: 115%;
    padding-left: 0.4rem;
    line-height: 2rem;
}
.subnet-input input {
    padding-left: 1rem;
}

/* column selector */
.column-selector {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.column-selector-menu {
    min-width: 200px;
}

.column-selector-menu label {
    margin-bottom: 0;
    user-select: none;
}

.column-selector-menu label:hover {
    background-color: var(--bs-tertiary-bg);
}

.column-selector-menu input[type='checkbox'] {
    cursor: pointer;
}

.column-selector-menu .fw-bold {
    font-weight: 600;
}

.column-selector-menu .border-bottom {
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
}

/* LIVE badge — subtle breathing animation while live data is displayed */
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.live-badge {
    animation: live-pulse 2s ease-in-out infinite;
}

/* Import dot on Admin nav tab — pulses while import is running */
@keyframes import-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.import-indicator-dot {
    animation: import-dot-pulse 1.2s ease-in-out infinite;
    width: 0.55rem !important;
    height: 0.55rem !important;
    min-width: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
}

/* sortable tables */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    white-space: nowrap;
}

th.sortable:hover {
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.06);
}

th.sortable .sort-icon {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.75em;
    opacity: 0.8;
}

th.sortable.sort-asc,
th.sortable.sort-desc {
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.1);
    font-weight: 600;
}

.table-responsive.invert {
    transform: rotateX(180deg);
    overflow-x: scroll;
}
.table-responsive.invert > .table-responsive {
    transform: rotateX(-180deg);
}

.card.loading .card-body {
    animation: blur-in 0.3s ease-out forwards;
}

@keyframes blur-in {
    from {
        filter: blur(0px);
    }
    to {
        filter: blur(5px);
    }
}

/* ── noUiSlider skin (replaces ion.rangeSlider / sprite-skin-nice) ─────────
   Targets to match the previous "Nice" skin look-and-feel:
   - Horizontal grey track, 8px tall
   - Blue-grey filled bar between handles
   - Circular white handles (22×22 px) with subtle shadow
   - Small grid/pip labels below the track
   - Floating tooltips above handles, styled like the old irs-from/irs-to bubbles
──────────────────────────────────────────────────────────────────────────── */

nfsen-daterange {
    display: block;
    width: 100%;
    padding: 20px 12px 8px; /* top: tooltips above track; sides/bottom: breathing room */
}

nfsen-daterange .daterange-slider {
    margin: 0 11px; /* compensate for handle overflow at track edges */
}

/* Base track */
.noUi-target {
    height: 8px;
    border-radius: 4px;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.noUi-connects {
    border-radius: 4px;
    overflow: hidden; /* clip connect bar to track radius */
}

/* Filled bar between the two handles */
.noUi-connect {
    background: #8ca4b0; /* muted blue-grey, close to ion-slider bar colour */
}

/* Handles */
.noUi-handle {
    width: 22px !important;
    height: 22px !important;
    right: -11px !important;
    top: -8px !important;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: default;
}
/* Remove the default inner cross-hair lines */
.noUi-handle::before,
.noUi-handle::after {
    display: none;
}
.noUi-handle:hover {
    border-color: var(--bs-emphasis-color);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.noUi-handle:focus {
    outline: 2px solid #86b7fe;
    outline-offset: 1px;
}

/* Floating tooltips above handles */
.noUi-tooltip {
    background: var(--bs-tooltip-bg);
    color: var(--bs-tooltip-color);
    border: none;
    border-radius: 3px;
    font-size: 10px;
    line-height: 1.333;
    padding: 1px 5px;
    white-space: nowrap;
    bottom: 26px; /* position above the handle */
}

/* Pip grid below track */
.noUi-pips-horizontal {
    padding: 6px 0 0;
    height: 30px;
    top: 100%;
}
.noUi-marker-horizontal.noUi-marker {
    height: 8px;
    background: var(--bs-secondary-color);
    width: 1px;
}
.noUi-marker-horizontal.noUi-marker-large,
.noUi-marker-horizontal.noUi-marker-normal {
    height: 12px;
}
.noUi-marker-horizontal.noUi-marker-sub {
    height: 6px;
}
.noUi-value {
    color: var(--bs-secondary-color);
    font-size: 9px;
    line-height: 1;
    padding: 0 3px;
}

/* ── Tooltip component (no-library replacement for bootstrap.Tooltip) ────── */
.nfsen-tip-popup {
    background: var(--bs-tooltip-bg);
    color: var(--bs-tooltip-color);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    max-width: 260px;
    white-space: normal;
    line-height: 1.4;
    pointer-events: none;
}

/* ── Filter panel UX ─────────────────────────────────────────────────────── */

/* Allow btn-groups inside narrow filter-group boxes to wrap onto a new line
   instead of overflowing / clipping (e.g. Data Type in col-md-2). */
.filter-group .btn-group {
    flex-wrap: wrap;
}


/* Refined section header labels inside filter panels */
.filter-label {
    font-size: 0.6875rem;       /* 11px — smaller than body, clearly subordinate */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.15);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1.4;
}

/* Card-like visual group for each filter section */
.filter-group {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.75rem 0.875rem;
}

/* Nested sub-section labels (e.g. Global / Port / IP Aggregation) */
.filter-sublabel {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.375rem;
    display: block;
}

/* Graph options row below the chart — contained panel look */
#graphOptions {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.875rem 0.75rem;
    margin-top: 1rem !important;
}

/* ── Native <dialog> modal (ip-info-modal, replaces Bootstrap JS Modal) ──── */
dialog#ip-modal-inner {
    border: none;
    border-radius: 8px;
    padding: 24px;
    min-width: 400px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
dialog#ip-modal-inner::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* ── Toast notification overlay ──────────────────────────────────────────── */
#alerts-toast-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1090;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    min-width: 320px;
    max-width: min(480px, calc(100vw - 2.5rem));
    pointer-events: none; /* let clicks pass through empty space */
}
#alerts-toast-container nfsen-toast {
    pointer-events: auto;
}
#alerts-toast-container .alert {
    margin-bottom: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    overflow: hidden; /* contain the progress bar */
}
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: 0.25;
    transform-origin: left;
    animation: toast-shrink linear forwards;
}
@keyframes toast-shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ── Dark mode: neutral btn-outline-primary (match light-mode grey intent) ── */
[data-bs-theme="dark"] {
    .btn-outline-primary {
        --bs-btn-bg: transparent;
        --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-border-color: var(--bs-border-color);
        --bs-btn-active-bg: var(--bs-secondary-bg);
        --bs-btn-active-border-color: var(--bs-border-color);
        --bs-btn-active-color: var(--bs-body-color);
        --bs-gradient: none;
        --bs-btn-disabled-color: var(--bs-secondary-color);
        --bs-btn-disabled-border-color: var(--bs-border-color);
    }

    /* Active nav tab: use tertiary bg to match filter area */
    .nav-tabs .nav-link.active {
        --bs-nav-tabs-link-active-bg: var(--bs-tertiary-bg);
        font-weight: bold;
    }

    /* Dygraphs: axis labels and legend */
    .dygraph-axis-label {
        color: var(--bs-body-color);
    }
    .dygraph-legend {
        background: var(--bs-secondary-bg);
        color: var(--bs-body-color);
    }

    /* Health table: mute warning/danger row backgrounds so they don't glare */
    .table > tbody > tr.table-warning {
        --bs-table-bg: color-mix(in srgb, var(--bs-warning) 12%, var(--bs-body-bg));
        --bs-table-color: var(--bs-body-color);
        --bs-table-striped-bg: color-mix(in srgb, var(--bs-warning) 15%, var(--bs-body-bg));
    }
    .table > tbody > tr.table-danger {
        --bs-table-bg: color-mix(in srgb, var(--bs-danger) 14%, var(--bs-body-bg));
        --bs-table-color: var(--bs-body-color);
        --bs-table-striped-bg: color-mix(in srgb, var(--bs-danger) 17%, var(--bs-body-bg));
    }
}