/* ============================================================================
   PPPHP — Card Gallery styles (SINGLE SOURCE OF TRUTH)

   Shared verbatim by:
     • the Designer canvas   — modules/Designer/Views/index.php inlines this file
       (rules apply to .pp-card inside #ppdCanvas; theme tokens come from
       .ppd-canvas via modules/Designer/Views/app/theme.js)
     • every generated app   — core/Build/BuildWriter::generateDesignerCss()
       appends this file into assets/css/designer-base.css

   So "what you design is what ships." Uses the theme's --pp-* tokens, so it
   themes automatically in both places. Edit card visuals HERE only — the
   Designer adds a few design-time-only extras (ghost cards, placeholders,
   preview action buttons) in designer.css under .ppd-canvas.
   ============================================================================ */

.ppd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: .25rem; }
.ppd-cards.density-compact { gap: .6rem; }
.ppd-cards.density-comfortable { gap: 1.4rem; }

.pp-card {
    --pp-text-muted: var(--pp-muted, #64748b);
    --pp-muted-bg: var(--pp-surface-soft, #f1f5f9);
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--pp-border, #e2e8f0); border-radius: 12px;
    background: var(--pp-surface, #fff); box-shadow: var(--pp-shadow-sm, 0 4px 14px rgba(15, 23, 42, .05));
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.pp-card:hover { transform: translateY(-2px); box-shadow: var(--pp-shadow-md, 0 12px 26px rgba(15, 23, 42, .09)); border-color: color-mix(in srgb, var(--pp-primary, #6366f1) 45%, var(--pp-border, #e2e8f0)); }

.pp-card-media { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pp-muted-bg, #f1f5f9); color: var(--pp-text-muted, #94a3b8); font-size: 22px; }
.pp-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Header lays out as [ title .......... badge ] then the subtitle wraps below. */
.pp-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; padding: .8rem .9rem .55rem; border-bottom: 1px solid var(--pp-border, #eef1f6); }
.pp-card-title { order: 1; flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .95rem; color: var(--pp-text, #0f172a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-card-title a { color: inherit; text-decoration: none; }
.pp-card-title a:hover { text-decoration: underline; color: var(--pp-primary, #6366f1); }
.pp-card-badge { order: 2; align-self: flex-start; display: inline-flex; align-items: center; margin-left: auto; padding: .12rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4; white-space: nowrap; background: var(--pp-muted-bg, #eef2f7); color: var(--pp-text, #334155); border: 1px solid var(--pp-border, #e2e8f0); }
.pp-card-subtitle { order: 3; flex: 1 1 100%; font-size: .8rem; color: var(--pp-text-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-card-body { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 auto; padding: .55rem .9rem .7rem; margin: 0; }
.ppd-cards.density-compact .pp-card-body { padding: .45rem .8rem .55rem; gap: .2rem; }
.pp-card-row { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%); gap: .5rem; font-size: .82rem; align-items: baseline; }
.pp-card-row dt { color: var(--pp-text-muted, #64748b); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-card-row dd { margin: 0; color: var(--pp-text, #0f172a); overflow-wrap: anywhere; }

.pp-card-foot { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem .9rem .75rem; border-top: 1px solid var(--pp-border, #eef1f6); margin-top: auto; }
.pp-card-foot .ppd-grid-actions { display: contents; }
/* Clean, consistent icon buttons (replaces the browser-default grey boxes the
   bare .ppd-action-* buttons fell back to). Styles the generated app's action
   buttons AND the Designer canvas preview buttons alike. */
.pp-card-foot button, .pp-card-foot a { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 34px; height: 34px; padding: 0 .5rem; border: 1px solid var(--pp-border, #e2e8f0); border-radius: 8px; background: var(--pp-surface, #fff); color: var(--pp-text-muted, #64748b); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; text-decoration: none; transition: border-color .14s, color .14s, background .14s; }
.pp-card-foot button:not([disabled]):hover, .pp-card-foot a:hover { border-color: var(--pp-primary, #6366f1); color: var(--pp-primary, #6366f1); background: color-mix(in srgb, var(--pp-primary, #6366f1) 8%, var(--pp-surface, #fff)); }
.pp-card-foot .pp-act-danger:not([disabled]):hover, .pp-card-foot .ppd-action-delete:not([disabled]):hover { border-color: var(--pp-danger-border, #fecaca); color: var(--pp-danger, #dc2626); background: var(--pp-danger-soft, #fef2f2); }

.pp-card-muted { color: var(--pp-text-muted, #94a3b8); }
.pp-card-empty { grid-column: 1 / -1; padding: 2rem; text-align: center; color: var(--pp-text-muted, #64748b); border: 1px dashed var(--pp-border, #e2e8f0); border-radius: 12px; }
