/* ================================================================
   PROJECT MEMORY — theme-clean-search.css
   pm-panel-search: panel content wrapper, search bar, filter
   selector, results list, timeline header, bulk actions.
   Depends on: theme-clean.css (tokens)
   ================================================================ */


/* ----------------------------------------------------------------
   PANEL CONTENT WRAPPER
   Shared by all non-home panels — scroll container with padding.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Scroll container for non-home panel content.
 *   Provides consistent padding and accounts for the safe area at
 *   the bottom so content doesn't hide behind system UI.
 * @apps project-memory
 * @type        css-class
 * @name        pm-panel-content
 * @tags        TODO
 * @called-by   pm-panel-calendar.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 768px) {
    .pm-panel-content {
        padding: 0 20px;
    }
    .pm-selector-filter {
        gap: 4px;
    }
    .pm-selector-filter-button {
        flex: 1;
        padding: 5px 4px;
        font-size: clamp(0.6rem, 2.8vw, 0.78rem);
        text-align: center;
    }
}


/* ----------------------------------------------------------------
   SEARCH BAR
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Search input + button row at the top of pm-panel-search.
 * @apps project-memory
 * @type        css-class
 * @name        pm-search-bar
 * @tags        TODO
 * @called-by   pm-panel-people-registry.html, pm-panel-places-registry.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Text input inside pm-search-bar.
 * @apps project-memory
 * @type        css-class
 * @name        pm-search-input
 * @tags        TODO
 * @called-by   pm-modal-people-categories.html, pm-modal-place-categories.html, pm-panel-people-registry.html, pm-panel-places-registry.html
 * @depends-on  --pm-border, --pm-radius-small, --pm-text-1, --pm-surface
 * @updated 2026-04-13
 */
.pm-search-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-small);
    font-size: 0.92rem;
    color: var(--pm-text-1);
    background: var(--pm-surface);
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}
.pm-search-input:focus { border-color: var(--pm-brand); }

/**
 * @pm-registry
 * @prefix pm
 * @description Search submit button inside pm-search-bar.
 * @apps project-memory
 * @type        css-class
 * @name        pm-search-button
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-brand, --pm-radius-small
 * @updated 2026-04-13
 */
.pm-search-button {
    padding: 10px 16px;
    background: var(--pm-brand);
    color: white;
    border-radius: var(--pm-radius-small);
    font-size: 1rem;
    flex-shrink: 0;
}
.pm-search-button:active { opacity: 0.82; }


/* ----------------------------------------------------------------
   FILTER SELECTOR  (Memories / People / Places)
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Row of filter toggle buttons — Memories / People / Places.
 *   Active state controlled by JS toggling .active on pm-selector-filter-button.
 * @apps project-memory
 * @type        css-class
 * @name        pm-selector-filter
 * @tags        TODO
 * @called-by   none found
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-selector-filter {
    display: flex;
    gap: 7px;
    margin-bottom: 12px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Individual filter toggle button inside pm-selector-filter.
 * @apps project-memory
 * @type        css-class
 * @name        pm-selector-filter-button
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-radius-full, --pm-surface, --pm-text-3, --pm-border
 * @updated 2026-04-13
 */
.pm-selector-filter-button {
    padding: 6px 14px;
    border-radius: var(--pm-radius-full);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--pm-surface);
    color: var(--pm-text-3);
    border: 1.5px solid var(--pm-border);
    transition: all 0.15s;
    cursor: pointer;
}
.pm-selector-filter-button.active {
    background: var(--pm-brand);
    color: white;
    border-color: var(--pm-brand);
}


/* ----------------------------------------------------------------
   SEARCH RESULTS
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Container for search result items. Populated by JS.
 * @apps project-memory
 * @type        css-class
 * @name        pm-search-results
 * @tags        TODO
 * @called-by   none found
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-search-results {
    margin-bottom: 4px;
}


/* ----------------------------------------------------------------
   TIMELINE HEADER  (Recent Memories label + bulk actions)
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Header row above the memory timeline — label on the
 *   left, bulk action buttons on the right.
 * @apps project-memory
 * @type        css-class
 * @name        pm-search-timeline-header
 * @tags        TODO
 * @called-by   pm-panel-people-registry.html, pm-panel-places-registry.html
 * @depends-on  --pm-text-3
 * @updated 2026-04-13
 */
.pm-search-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pm-text-3);
    margin: 20px 0 10px;
    padding: 0 4px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Bulk action button group inside pm-search-timeline-header.
 * @apps project-memory
 * @type        css-class
 * @name        pm-bulk-actions
 * @tags        TODO
 * @called-by   pm-panel-people-registry.html, pm-panel-places-registry.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-bulk-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Bulk mode — Delete trigger button.
 * @apps project-memory
 * @type        css-class
 * @name        pm-bulk-button-delete
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-radius-small, --pm-danger-light, --pm-danger
 * @updated 2026-04-13
 */
.pm-bulk-button-delete {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--pm-radius-small);
    background: var(--pm-danger-light);
    color: var(--pm-danger);
    cursor: pointer;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Bulk mode — Cancel button.
 * @apps project-memory
 * @type        css-class
 * @name        pm-bulk-button-cancel
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-radius-small, --pm-surface-2, --pm-text-2
 * @updated 2026-04-13
 */
.pm-bulk-button-cancel {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--pm-radius-small);
    background: var(--pm-surface-2);
    color: var(--pm-text-2);
    cursor: pointer;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Bulk mode — Confirm delete button.
 * @apps project-memory
 * @type        css-class
 * @name        pm-bulk-button-confirm
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-radius-small, --pm-danger
 * @updated 2026-04-13
 */
.pm-bulk-button-confirm {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--pm-radius-small);
    background: var(--pm-danger);
    color: white;
    cursor: pointer;
}
.pm-bulk-button-confirm:disabled {
    opacity: 0.4;
    cursor: default;
}


/* ----------------------------------------------------------------
   MEMORY TIMELINE
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Container for the memory timeline card list.
 *   Populated by JS (timelineComponent.js).
 * @apps project-memory
 * @type        css-class
 * @name        pm-memory-timeline
 * @tags        TODO
 * @called-by   pm-panel-people-registry.html, pm-panel-places-registry.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-memory-timeline {
    padding-bottom: 24px;
}