/* ================================================================
   PROJECT MEMORY — theme-clean-cards.css
   All card types: pm-card-memory, pm-card-note, pm-card-reminder,
   pm-card-person, pm-card-place and their child elements.
   Depends on: theme-clean.css (tokens)
   ================================================================ */

/* ─── MEMORY CARDS ─────────────────────────────────────────── */
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-memory
 * @tags        themes
 * @description Interactive flex container for a memory list item, featuring a shadow and border.
 * @depends-on  --pm-panel-surface, --pm-radius-small, --pm-shadow-small, --pm-border
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-card-memory {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--pm-panel-surface);
    border-radius: var(--pm-radius-small);
    padding: 14px 14px;
    box-shadow: var(--pm-shadow-small);
    cursor: pointer;
    border: 1px solid var(--pm-border);
    transition: box-shadow 0.15s, transform 0.1s;
    margin-bottom: 12px;
}
.pm-card-memory:active { transform: scale(0.98); box-shadow: none; }

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-memory-body
 * @tags        themes
 * @description Flex-growing container for memory metadata (date, title) within the memory card.
 * @depends-on  pm-card-memory
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-card-memory-body {
    flex: 1;
    min-width: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-memory-date
 * @tags        themes
 * @description Small, secondary text display for the memory timestamp within a memory card.
 * @depends-on  pm-card-memory-body, --pm-text-3
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-card-memory-date {
    font-size: 0.72rem;
    color: var(--pm-text-3);
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-memory-title
 * @tags        themes
 * @description Primary bold title for a memory card, with single-line truncation.
 * @depends-on  pm-card-memory-body, --pm-text-1
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-card-memory-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pm-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-memory-thumb
 * @tags        themes
 * @description Square media preview thumbnail for memory cards, supporting images and videos.
 * @depends-on  pm-card-memory, --pm-surface-2
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-card-memory-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--pm-radius-small);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--pm-surface-2);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-memory-thumb-audio
 * @tags        themes
 * @description Gradient-styled audio placeholder thumbnail for memories without visual assets.
 * @depends-on  pm-card-memory-thumb, --pm-home-gradient-start, --pm-home-gradient-end
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-card-memory-thumb-audio {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--pm-home-gradient-start), var(--pm-home-gradient-end));
    color: white;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-memory-badges
 * @tags        themes
 * @description Flex container for status icons or category badges displayed on a memory card.
 * @depends-on  pm-card-memory
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-card-memory-badges {
    display: flex;
    gap: 4px;
    margin-top: 5px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-memory-badge
 * @tags        themes
 * @description Individual status badge with a light background and secondary text styling.
 * @depends-on  pm-card-memory-badges, --pm-surface-2, --pm-border
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-card-memory-badge {
    font-size: 0.75rem;
    background: var(--pm-surface-2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-xsmall);
    padding: 1px 5px;
    line-height: 1.6;
}

/* ─── SELECTION STATES ───────────────────────────────────────── */
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-memory-checkbox
 * @tags        themes
 * @description Circular selection indicator for bulk memory actions.
 * @depends-on  pm-card-memory, --pm-border, --pm-surface-2
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-card-memory-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--pm-border);
    flex-shrink: 0;
    background: var(--pm-surface-2);
    transition: background 0.15s, border-color 0.15s;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-memory-checkbox-checked
 * @tags        themes
 * @description Active state for the selection checkbox, showing a danger-colored background and 'X' icon for deletion mode.
 * @depends-on  pm-card-memory-checkbox, --pm-danger
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-card-memory-checkbox-checked {
    background: var(--pm-danger);
    border-color: var(--pm-danger);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2l-6 6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.pm-card-memory.pm-selected {
    border-color: var(--pm-danger);
    background: color-mix(in srgb, var(--pm-danger) 8%, var(--pm-surface));
}