/* =====================================================================
 * MoversBoard — Table View
 *
 * Spreadsheet-style 9-column board:
 *   Posted | Status | Type | From | To | Move Date | Size | Price | Actions
 *
 * Wrapper:    .jobs-board-wrap         (rounded box, overflow-x: auto)
 * Header row: .jobs-board-head         (uppercase column labels, muted)
 * Data row:   .jobs-board-row          (clickable, hover-highlighted)
 * Cell:       .jb-col                  (truncates with ellipsis)
 * Cell mods:  .jb-posted, .jb-status, .jb-type, .jb-from, .jb-to,
 *             .jb-date, .jb-size, .jb-price, .jb-actions
 * Pills:      .jb-status-pill, .jb-type-pill   (override absolute status
 *                                                badge styles for inline use)
 *
 * Mobile/tablet (<=768px): wrapper scrolls horizontally — the row grid
 * keeps its full min-width (860px) so columns stay aligned with the head.
 * ===================================================================== */

.jobs-board-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 10-column grid: ☐ | Posted | Status | Type | From | To | Move Date | Size | Price | Actions */
.jobs-board-head,
.jobs-board-row {
    display: grid;
    grid-template-columns: 34px 72px 110px 80px minmax(110px,1fr) minmax(110px,1fr) 90px 100px 80px 110px;
    min-width: 894px;
    align-items: center;
    gap: 0;
    padding: 0 12px;
}

/* Highlight selected rows in table view */
.jobs-board-row.is-selected,
.tp-board-row.is-selected   { background: var(--accent-light); }
.jobs-board-row.is-selected:hover,
.tp-board-row.is-selected:hover { background: #fff3c5; }

/* Checkbox cell — center the input vertically/horizontally */
.jb-check, .tp-check {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
.jb-check input[type="checkbox"],
.tp-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
}

.jobs-board-head {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.jobs-board-row {
    border-bottom: 1px solid var(--border-light);
    transition: background var(--transition);
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
}
.jobs-board-row:last-child { border-bottom: none; }
.jobs-board-row:hover      { background: var(--bg); }

/* ---------- Cell base + per-column tweaks ---------- */
.jb-col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}

.jb-posted        { color: var(--text-secondary); font-size: 12px; }
.jb-from, .jb-to  { color: var(--text-primary);  }
.jb-date          { color: var(--text-secondary); font-size: 12px; }
.jb-size          { color: var(--text-secondary); }
.jb-price         { font-weight: 700; color: var(--text-primary); }
.jb-actions       { display: flex; gap: 4px; }

/* ---------- Inline pills (override absolute/large styles from grid-view.css) ---------- */
.jb-status-pill {
    position: static;
    border-radius: 4px;
    font-size: 10px;
    padding: 2px 6px;
    display: inline-block;
}

.jb-type-pill { font-size: 10px; }

/* =====================================================================
 * Sortable column headers (used by .jobs-board-head and .tp-board-head)
 *
 * Default state shows ⇅ (neutral). Active column shows ▲ asc or ▼ desc
 * with the arrow tinted by our accent palette (yellow for asc, red-ish
 * for desc — sticking to the existing project tones).
 * ===================================================================== */
.sortable {
    cursor: pointer;
    user-select: none;
    transition: color var(--transition);
}

.sortable:hover {
    color: var(--text-primary);
}

.sort-arrow {
    font-size: 9px;
    opacity: 0.5;
    margin-left: 2px;
    transition: opacity var(--transition), color var(--transition);
}

.sortable:hover .sort-arrow { opacity: 1; }

.sort-asc,
.sort-desc { color: var(--text-primary); }

.sort-asc  .sort-arrow { opacity: 1; color: #b88800; }   /* darker accent for contrast */
.sort-desc .sort-arrow { opacity: 1; color: #b91c1c; }

/* =====================================================================
 * Filter-bar add-ons: results count, clear button, active-filter badge
 * Styled to match existing .filter-bar / .btn-icon visuals.
 * ===================================================================== */

/* "Showing X of Y" indicator below the filter bar */
.filter-results {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-results.filtered {
    color: var(--text-primary);
    font-weight: 600;
}

.filter-results.filtered::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
}

/* Clear-all-filters button (sits inside .filter-bar / .filter-row) */
.filter-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
}

.filter-clear-btn:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.filter-clear-btn.hidden { display: none; }

/* Small badge on the filter bar showing active filter count */
.filter-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent);
    color: var(--accent-text);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.filter-active-badge.hidden { display: none; }


/* =====================================================================
 * Multi-State Filter — custom checkbox dropdown
 * Replaces the plain <select id="stateFilter"> with a searchable,
 * multi-checkmark picker that matches the existing filter-bar visuals.
 * ===================================================================== */

.multistate-wrap {
    position: relative;
    display: inline-block;
}

/* The trigger button inherits .filter-select sizing/border from style.css */
.multistate-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    padding: 0 10px;
    height: 36px;
    min-width: 120px;
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    user-select: none;
}
.multistate-toggle:hover,
.multistate-toggle.open  { border-color: var(--accent); color: var(--text-primary); }
.multistate-toggle.has-selection {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--text-primary);
    font-weight: 600;
}

.multistate-chevron {
    flex-shrink: 0;
    opacity: 0.45;
    transition: transform var(--transition), opacity var(--transition);
}
.multistate-toggle.open .multistate-chevron  { transform: rotate(180deg); opacity: 1; }
.multistate-toggle.has-selection .multistate-chevron { opacity: 0.7; }

/* ---- Dropdown panel ---- */
.multistate-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 1200; /* must exceed filter-bar's 1100 + any Leaflet pane z-index */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.11);
    width: 230px;
    overflow: hidden;
}
.multistate-dropdown.hidden { display: none; }

/* ---- Search input ---- */
.multistate-search-wrap {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
}
.multistate-search {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    background: var(--bg);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition);
}
.multistate-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,213,80,.18); }

/* ---- Scrollable list ---- */
.multistate-list {
    max-height: 228px;
    overflow-y: auto;
    padding: 4px 0;
    overscroll-behavior: contain;
}

/* ---- Single checkbox row ---- */
.multistate-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 13px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: background var(--transition);
    user-select: none;
}
.multistate-item:hover   { background: var(--bg); }
.multistate-item.checked { background: var(--accent-light); font-weight: 600; }

.multistate-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 3px;
}
.multistate-item-code {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.multistate-item.hidden { display: none; }

/* No-results message */
.multistate-empty {
    padding: 16px 13px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* ---- Footer row ---- */
.multistate-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-top: 1px solid var(--border-light);
    min-height: 34px;
}
.multistate-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
.multistate-count.hidden { display: none; }

.multistate-clear-btn {
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 5px;
    transition: background var(--transition), color var(--transition);
}
.multistate-clear-btn:hover { background: var(--red-light); color: var(--red); }
.multistate-clear-btn.hidden { display: none; }


/* =====================================================================
 * Advanced Filter Panel
 * Collapsible row of extra filter controls (date range, status, price…)
 * toggled by the .btn-adv-filter funnel button in the filter-bar.
 * ===================================================================== */

/* ---- Toggle button ---- */
.btn-adv-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    height: 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
}
.btn-adv-filter:hover { border-color: var(--accent); color: var(--text-primary); }
.btn-adv-filter.active {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--text-primary);
}

/* ---- Collapsible panel body ---- */
.adv-filter-body {
    padding: 14px 0 2px;
    border-top: 1px solid var(--border-light);
    margin-top: 6px;
    animation: advFilterIn 0.18s ease;
}
.adv-filter-body.hidden { display: none; }

@keyframes advFilterIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);     }
}

/* ---- Field grid ---- */
.adv-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 10px 14px;
    margin-bottom: 12px;
}

.adv-filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.adv-filter-item.span2 { grid-column: span 2; }

.adv-filter-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.adv-filter-input {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text-primary);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.adv-filter-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(255,213,80,.15);
}
select.adv-filter-input { cursor: pointer; }
input[type="date"].adv-filter-input { cursor: pointer; }
input[type="number"].adv-filter-input::-webkit-inner-spin-button { opacity: 0.5; }

/* ---- Footer: results count + clear button ---- */
.adv-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
    min-height: 34px;
}

/* Mobile: stack grid to 2 columns */
@media (max-width: 600px) {
    .adv-filter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =====================================================================
 * Bulk-selection info strip — appears below the table when ≥1 rows are
 * checked. A simple yellow-tinted text bar with a "Clear selection" link.
 * ===================================================================== */
.bulk-selected-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-top: 12px;
    background: var(--accent-light);
    border: 1px solid #f3d56a;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    animation: bulkInfoIn 0.18s ease;
}
.bulk-selected-info.hidden { display: none; }

@keyframes bulkInfoIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.bulk-selected-text {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.bulk-selected-text::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(255,213,80,0.32);
    flex-shrink: 0;
}

.bulk-selected-clear {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all var(--transition);
}
.bulk-selected-clear:hover {
    background: var(--red-light);
    color: var(--red);
}


/* =====================================================================
 * Print "what to print" modal (scope picker)
 * ===================================================================== */
.print-modal-overlay {
    position: fixed;
    inset: 0;
    /* Sits above the header (1000), tabs-nav (900), bottom-nav (900),
       post-panel (1100) and the job-detail modal (2000) so the dark
       backdrop covers the entire viewport — matches .modal-overlay. */
    z-index: 2100;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: pmFade 0.18s ease;
}
@keyframes pmFade {
    from { opacity: 0; } to { opacity: 1; }
}

.print-modal {
    background: var(--surface);
    border-radius: 16px;
    width: 460px;
    max-width: 100%;
    max-height: 92vh;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pmSlide 0.2s ease;
}
@keyframes pmSlide {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.print-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border-light);
}
.print-modal-head h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.print-modal-close {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition);
}
.print-modal-close:hover { background: var(--border); color: var(--text-primary); }

.print-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
}

.print-scope-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.print-scope-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition);
}
.print-scope-opt:hover { border-color: var(--accent); background: var(--accent-light); }
.print-scope-opt:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: 0 0 0 2px rgba(255,213,80,.15);
}
.print-scope-opt.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg);
}
.print-scope-opt input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
    margin-top: 1px;
    cursor: pointer;
    flex-shrink: 0;
}
.print-scope-text { flex: 1; }
.print-scope-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.print-scope-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 7px;
    background: var(--accent);
    color: var(--accent-text);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.print-scope-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
    font-weight: 500;
}

.print-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border-light);
    background: var(--bg);
}