/* csv-viewer chrome styles — Bootstrap supplies the rest. Grid styles live
 * in src/grid/grid.css. */

.drop-zone {
    min-height: 200px;
    cursor: pointer;
    border-style: dashed !important;
    border-color: var(--bs-border-color);
    transition: all 0.15s ease-in-out;
}
.drop-zone:hover,
.drop-zone.drag-over {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-primary) !important;
}

/* Status bar — row counts lower-left (#status, the grid's statusBar
 * element); a right cluster (#footer-right) carries the date-ambiguity note
 * (#date-note) then the Inferred/Raw display-mode switch (#display-mode),
 * the switch pinned rightmost so the note can grow/shrink without moving it.
 * #status flex-grows and truncates first, so on a phone the switch stays. */
#status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: 2px 12px;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}
#status {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#footer-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
#date-note {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#display-label {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-right: -6px;   /* snug the label up against the switch */
}
/* Compact segmented switch so the footer stays slim (Bootstrap's btn-sm is
 * too tall for a 0.75rem footer). */
#display-mode .btn {
    padding: 0 0.5rem;
    font-size: 0.72rem;
    line-height: 1.6;
    --bs-btn-border-color: var(--bs-border-color);
}

/* Responsive navbar — four clean phases as the window narrows, so buttons
 * never peel onto a second line one at a time (flex-wrap is only the
 * last-ditch fallback):
 *   1. >= 1500px:       every button shows its full label. The cutoff sits
 *                      above the ~1450px the full labeled bar needs, so the
 *                      buttons collapse to icons before Open could wrap.
 *   2. 992-1500:       labels collapse to icons; all buttons stay inline
 *                      (tooltips carry the names).
 *   3. md-lg  (768):   Row 1 / Copy / Save / Open fold into the "More"
 *                      dropdown (markup in index.html, d-lg-* classes); the
 *                      search box is capped so search + quintet + More keep
 *                      to one line.
 *   4. < md   (768):   the search box takes its own full-width line and ALL
 *                      buttons drop below it as one group (brand / search /
 *                      buttons end up stacked — phone mode); the version
 *                      number drops here too, the moment the bar stacks, so
 *                      it doesn't flicker in and out.
 * Breakpoints retune here + on the d-lg-* classes in index.html. Overrides
 * use !important to beat the input's inline max-width. */
@media (max-width: 1499.98px) {
    #toolbar .btn-label { display: none; }
}
@media (max-width: 991.98px) {
    #global-filter { max-width: 14rem !important; }
}
@media (max-width: 767.98px) {
    #global-filter { flex: 1 1 100%; max-width: none !important; }
    #header-version { display: none; }
}

/* Copy / Save split-button menus: positioned by us (no Bootstrap JS /
 * Popper); app.js toggles .show. dropdown-menu-end keeps them right-aligned
 * under the caret so they don't run off the viewport edge. */
#toolbar .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 2px;
}
#toolbar .dropdown-item .form-check-input { flex: none; }
/* transient "Copied" / "Saved" confirmation on the primary button */
#toolbar .btn.flash-ok {
    color: var(--bs-success);
    border-color: var(--bs-success);
}

/* Card chrome + viewport cap on the grid's scroll area (the grid itself
 * stays layout-neutral) */
#grid-root .csvgrid-scroll {
    max-height: none;
    background: var(--bs-body-bg);
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Full-screen inventory grid: only the data viewport scrolls. */
html, body { height: 100%; }
body { height: 100vh; height: 100dvh; min-height: 0 !important; display: flex; flex-direction: column; overflow: hidden; }
body > header { flex: 0 0 auto; }
body > main { flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; padding-top: 10px !important; padding-bottom: 30px !important; display: flex; flex-direction: column; }
#table-view:not(.d-none) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#grid-root { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; height: auto !important; }
#grid-root > .csvgrid { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; width: 100%; }
#grid-root .csvgrid-scroll { flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; max-height: none !important; overflow: auto; }
#grid-root .csvgrid-table { margin: 0; }

/* Table fills its viewport; JavaScript proportionally stretches actual columns. */
#grid-root .csvgrid-scroll { width: 100%; }
#grid-root .csvgrid-table { min-width: 100%; }