/* ========================================================================
   TOOLBAR / FILTER ROW / UTILITIES
   Replaces inline styles like style="display:flex; min-width:200px"
   ======================================================================== */

/* ── Toolbar: generic horizontal action row ── */
.toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.toolbar--between { justify-content: space-between; }
.toolbar--end { justify-content: flex-end; }
.toolbar--col-mobile {} /* will stack on mobile, see mobile.css */

.toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-width: 0;
}
.toolbar-spacer { flex: 1 1 auto; }

/* Form controls inside toolbar: shrink correctly */
.toolbar select,
.toolbar .form-select,
.toolbar .form-input {
    width: auto;
    min-width: 0;
}

/* Compact selects used inline previously: width: 110px, 120px, 130px ... */
.select-w-sm { width: clamp(120px, 18vw, 160px); }
.select-w-md { width: clamp(150px, 22vw, 200px); }
.select-w-lg { width: clamp(180px, 28vw, 240px); }

/* Pagination per-page select */
.pp-select { width: 110px; padding: 6px 10px; }

/* ── Banners (info/warn/success/danger) ── */
.banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: 1.4;
}
.banner__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.1rem;
    padding: 0 .25rem;
    margin-left: auto;
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
}
.banner__close:hover { color: var(--danger); background: var(--danger-soft); }

.banner--info    { background: var(--info-soft);    border-color: var(--info); }
.banner--success { background: var(--success-soft); border-color: var(--success); }
.banner--warning { background: var(--warning-soft); border-color: var(--warning); }
.banner--danger  { background: var(--danger-soft);  border-color: var(--danger); }
.banner--filter  { background: var(--brand-soft);   border-color: var(--brand); }

/* ── Section card head: helper for action right side ── */
.section-card-head .head-actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

/* ── Table column width utilities (replace style="width: 50px") ── */
.col-w-xs   { width: 40px; }
.col-w-sm   { width: 50px; }
.col-w-md   { width: 100px; }
.col-w-lg   { width: 140px; }
.col-w-flex { width: auto; min-width: 0; }
.txt-right  { text-align: right; }

/* ── Skeleton loaders ── */
@keyframes skeleton-pulse {
    0%   { opacity: 1; }
    50%  { opacity: .55; }
    100% { opacity: 1; }
}
.skeleton {
    display: inline-block;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse 1.4s ease-in-out infinite;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
.skeleton-line { height: 12px; width: 100%; display: block; margin: .35rem 0; }
.skeleton-line--sm { height: 10px; width: 60%; }
.skeleton-line--lg { height: 18px; width: 80%; }
.skeleton-card    { height: 80px; width: 100%; display: block; }

/* ── Stat scroll: horizontal snap on mobile (used when many stat-cards) ── */
.stat-scroll {
    /* desktop = grid behaves normally */
}

/* ── FAB (floating action button) ── */
.fab {
    position: fixed;
    right: var(--space-4);
    bottom: calc(72px + env(safe-area-inset-bottom) + var(--space-4));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 150;
    transition: transform .18s var(--ease-default), box-shadow .18s var(--ease-default);
}
.fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.fab:active { transform: scale(.95); }
@media (min-width: 769px) {
    .fab { bottom: var(--space-6); }
}

/* ── Inline filter chip (banner-mini) ── */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem .25rem .75rem;
    background: var(--brand-soft);
    border: 1px solid var(--brand);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}
.filter-chip__close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .15rem;
    border-radius: 50%;
}
.filter-chip__close:hover { color: var(--danger); }

/* ── Helpers used by stripped-inline templates ── */
.is-hidden { display: none !important; }

.section-card--mb { margin-bottom: var(--space-6); }
.section-card--mt { margin-top: var(--space-6); }
.section-card-body--flush { padding: 0 !important; }

.dropdown-menu--cols {
    min-width: 260px;
    max-height: 360px;
    overflow-y: auto;
}
.dropdown-loading {
    padding: 8px 10px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Diff-rules table column widths (replaces inline width:%) */
.diff-rules-table .rule-col-cond { width: 20%; }
.diff-rules-table .rule-col-num  { width: 15%; }
@media (max-width: 640px) {
    .diff-rules-table .rule-col-cond,
    .diff-rules-table .rule-col-num { width: auto; }
}

/* Block label for option list (replaces inline display:block in modals) */
.checkbox-label--block {
    display: block;
    margin-bottom: var(--space-2);
}