/**
 * HOA Management System — Generic Data Toolbar Overlay
 *
 * Shared, token-driven styling for the Search / Sort / Filter / Column-toggle
 * strip rendered by App.renderGenericCRUD(). Affects EVERY module that uses
 * the generic CRUD list (Owners, Tenants, Properties, Users, Inventory,
 * Payments, Invoices, Bookings, Concerns, Bonds, etc.).
 *
 * Strict rules:
 *   - Token-driven only.
 *   - Wrapper class .data-toolbar is the ONLY new DOM hook (added in
 *     renderGenericCRUD's container template).
 *   - All existing IDs (#filter-text, #clear-search-btn, #sort-by, #sort-dir,
 *     #toggle-advanced-filters, #filter-count-badge, #advanced-filters-panel,
 *     #filters-container, #bulk-action-container, #page-size-select,
 *     #pagination-info, #pagination-controls, .column-toggle, #owner-status-filter,
 *     #tenant-status-filter, .add-filter-btn, .clear-all-filters-btn) and event
 *     wiring preserved untouched.
 *   - Dark mode comes for free via [data-theme="dark"] semantic tokens.
 *
 * Loaded after style.css, shell.css, and module_guide.css.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LOCAL TOKENS
═══════════════════════════════════════════════════════════════════════════ */
.data-toolbar {
    --dt-radius-lg: 16px;
    --dt-radius-md: 12px;
    --dt-radius-sm: 10px;
    --dt-radius-pill: 999px;
    --dt-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dt-transition: 0.2s var(--dt-ease);

    /* Card base */
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--dt-radius-lg) !important;
    box-shadow: var(--shadow-xs) !important;
    padding: 12px 16px !important;
    margin-bottom: 14px !important;
    transition: box-shadow var(--dt-transition);
}
.data-toolbar:hover { box-shadow: var(--shadow-sm) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH INPUT — pill style with brand-green focus
═══════════════════════════════════════════════════════════════════════════ */
.data-toolbar .input-group {
    border-radius: var(--dt-radius-pill);
    overflow: hidden;
    background: var(--bg-sunken);
    border: 1px solid var(--border-default);
    transition: border-color var(--dt-transition),
                box-shadow var(--dt-transition);
}
.data-toolbar .input-group:focus-within {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
}
.data-toolbar .input-group .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary);
    padding-left: 14px;
    padding-right: 6px;
}
.data-toolbar .input-group #filter-text,
.data-toolbar .input-group .form-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-primary);
    font-size: 0.88rem;
}
.data-toolbar .input-group #filter-text::placeholder,
.data-toolbar .input-group .form-control::placeholder {
    color: var(--text-muted);
    font-style: normal;
}
.data-toolbar .input-group #clear-search-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted);
    border-radius: 0 var(--dt-radius-pill) var(--dt-radius-pill) 0;
}
.data-toolbar .input-group #clear-search-btn:hover {
    color: var(--text-danger);
    background: var(--bg-hover) !important;
}

/* Sort group input-group also pill */
.data-toolbar .input-group:has(#sort-by) .input-group-text {
    padding-right: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECTS — soft pill, brand-green focus
═══════════════════════════════════════════════════════════════════════════ */
.data-toolbar .form-select,
.data-toolbar select.form-select-sm,
.data-toolbar select#sort-by,
.data-toolbar select#sort-dir {
    background-color: var(--bg-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--dt-radius-pill);
    color: var(--text-primary);
    font-size: 0.85rem;
    padding-left: 14px;
    padding-right: 32px;
    transition: border-color var(--dt-transition),
                box-shadow var(--dt-transition);
}
.data-toolbar .form-select:focus,
.data-toolbar select:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}
/* Selects already inside an .input-group should drop their own border */
.data-toolbar .input-group .form-select {
    border: none !important;
    background-color: transparent !important;
    border-radius: 0 var(--dt-radius-pill) var(--dt-radius-pill) 0 !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTION BUTTONS — Filters / Columns / Export
═══════════════════════════════════════════════════════════════════════════ */
.data-toolbar .btn,
.data-toolbar .dropdown-toggle {
    border-radius: var(--dt-radius-pill);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 5px 14px;
    transition: background var(--dt-transition),
                border-color var(--dt-transition),
                color var(--dt-transition),
                transform var(--dt-transition),
                box-shadow var(--dt-transition);
}
.data-toolbar .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}
.data-toolbar .btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Filters CTA — outline brand */
.data-toolbar #toggle-advanced-filters {
    background: var(--bg-surface);
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);
}
.data-toolbar #toggle-advanced-filters:hover {
    background: var(--brand-primary-subtle);
    color: var(--brand-primary);
}
.data-toolbar #filter-count-badge {
    background: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
    border: 2px solid var(--bg-surface);
    font-weight: 700;
}

/* Export CSV button stays outline-success but pill */
.data-toolbar #crud-export-csv-btn { font-weight: 600; }

/* Column-toggle (eye) icon button */
.data-toolbar .dropdown > .dropdown-toggle {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}
.data-toolbar .dropdown > .dropdown-toggle:hover {
    background: var(--bg-hover);
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Hide caret on the columns dropdown for a cleaner icon-only look */
.data-toolbar .dropdown-menu-columns + ::after,
.data-toolbar .dropdown > .dropdown-toggle::after {
    /* keep caret but slim */
    margin-left: 6px;
    opacity: 0.6;
}

/* Column toggle dropdown panel polish */
.dropdown-menu-columns {
    border-radius: var(--dt-radius-md, 12px) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--bg-surface) !important;
}
.dropdown-menu-columns .form-check-label {
    font-size: 0.84rem;
    color: var(--text-primary);
}
.dropdown-menu-columns .form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOM-HEADER ROW — keep secondary filters compact and inline-feeling
═══════════════════════════════════════════════════════════════════════════ */
.data-toolbar .data-toolbar-custom {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-default);
}
.data-toolbar .data-toolbar-custom .form-label {
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    font-weight: 700;
}
.data-toolbar .data-toolbar-custom .form-select,
.data-toolbar .data-toolbar-custom .form-control {
    border-radius: var(--dt-radius-sm);
    background-color: var(--bg-surface);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADVANCED FILTERS PANEL
═══════════════════════════════════════════════════════════════════════════ */
.data-toolbar #advanced-filters-panel {
    border-top: 1px dashed var(--border-default) !important;
    margin-top: 10px !important;
    padding-top: 12px !important;
}
.data-toolbar #advanced-filters-panel h6 {
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}
.data-toolbar #advanced-filters-panel #add-filter-btn {
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);
    background: var(--bg-surface);
}
.data-toolbar #advanced-filters-panel #add-filter-btn:hover {
    background: var(--brand-primary-subtle);
}
.data-toolbar #advanced-filters-panel #clear-all-filters-btn {
    border: 1px solid var(--text-danger);
    color: var(--text-danger);
    background: var(--bg-surface);
}
.data-toolbar #advanced-filters-panel #clear-all-filters-btn:hover {
    background: var(--bg-danger);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BULK ACTIONS PANEL
═══════════════════════════════════════════════════════════════════════════ */
.data-toolbar #bulk-action-container {
    border-top: 1px dashed var(--border-default) !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
}
.data-toolbar #bulk-action-container .btn {
    border-radius: var(--dt-radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE-SIZE / PAGINATION ROW (.data-pagebar)
═══════════════════════════════════════════════════════════════════════════ */
.data-pagebar {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--dt-radius-md, 12px);
    box-shadow: var(--shadow-xs);
    padding: 8px 14px !important;
    margin-bottom: 10px !important;
}
.data-pagebar .page-size-select {
    background-color: var(--bg-sunken);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 0.82rem;
    padding: 3px 26px 3px 10px;
}
.data-pagebar .page-size-select:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}
.data-pagebar #pagination-info,
.data-pagebar small.text-muted {
    color: var(--text-secondary) !important;
    font-size: 0.78rem;
}
.data-pagebar .pagination .page-link {
    border-radius: 999px;
    margin: 0 2px;
    border-color: var(--border-default);
    color: var(--text-secondary);
    font-size: 0.8rem;
    min-width: 30px;
    text-align: center;
}
.data-pagebar .pagination .page-item.active .page-link {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: REDUCED MOTION
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .data-toolbar,
    .data-toolbar .btn,
    .data-toolbar .input-group,
    .data-toolbar .form-select,
    .data-toolbar select {
        transition: none !important;
    }
    .data-toolbar .btn:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════════════════════════ */
@media print {
    .data-toolbar,
    .data-pagebar {
        display: none !important;
    }
}