/* ==============================================
   GoodMood Dashboard — Platform Cards
   ============================================== */

/* --- Platform Card --- */
.gm-platform-card { display: flex; flex-direction: column; height: 100%; }
.gm-platform-card .platform-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.gm-platform-card .platform-name { font-family: var(--gm-font-heading); font-size: 1.125rem; font-weight: 600; color: var(--gm-color-dark); margin: 0 0 0.25rem 0; }
.gm-platform-card .platform-url { font-size: 0.75rem; color: #9ca3af; }

/* --- Platform URL Link --- */
.gm-platform-url { display: inline-block; font-size: 0.75rem; color: #6b7280; text-decoration: none; margin-top: 0.15rem; transition: color 0.2s; word-break: break-all; }
.gm-platform-url:hover { color: var(--gm-color-primary); text-decoration: underline; }
.gm-platform-url i { font-size: 0.65rem; margin-right: 0.2rem; }

/* --- Mini Gauge --- */
.gm-mini-gauge { margin: 1rem 0; }

/* --- Platform Meta --- */
.gm-platform-meta { display: flex; align-items: center; gap: 1rem; padding: 0.625rem 0; margin: 0.25rem 0; border-top: 1px solid #f3f4f6; font-size: 0.8rem; color: #9ca3af; }
.gm-meta-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.gm-meta-item i { font-size: 0.7rem; color: #d1d5db; }
.gm-meta-item a { color: var(--gm-color-primary); text-decoration: none; font-weight: 500; transition: color 0.2s; }
.gm-meta-item a:hover { color: var(--gm-color-primary-dark); text-decoration: underline; }

/* --- Pack Badges Row --- */
.gm-pack-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.75rem 0; }
.gm-pack-dot { width: 28px; height: 28px; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: white; position: relative; }
.gm-pack-dot[title]:hover::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 0.25rem 0.5rem; background: #111827; color: white; border-radius: 0.25rem; font-size: 0.625rem; white-space: nowrap; margin-bottom: 0.25rem; z-index: 10; }

/* --- Platform Card Footer --- */
.gm-platform-actions { margin-top: auto; padding-top: 1rem; border-top: 1px solid #f3f4f6; display: flex; gap: 0.5rem; }

/* --- Card Header Actions (sync + badge) --- */
.gm-card-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.gm-sync-mini-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #e5e7eb; background: #f9fafb; color: #6b7280; cursor: pointer; transition: all 0.2s; font-size: 0.75rem; padding: 0; }
.gm-sync-mini-btn:hover { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.gm-sync-mini-btn.syncing i { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* --- Add Platform Card --- */
.gm-add-platform-card { display: flex; align-items: center; justify-content: center; border: 2px dashed #d1d5db; border-radius: 16px; background: transparent; min-height: 220px; text-decoration: none; color: #6b7280; transition: all 0.3s ease; cursor: pointer; }
.gm-add-platform-card:hover { border-color: var(--gm-color-primary); background: rgba(255, 164, 78, 0.06); color: var(--gm-color-primary-dark); transform: translateY(-2px); }
.gm-add-platform-inner { text-align: center; padding: 2rem; }
.gm-add-platform-icon { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--gm-color-primary-light), #fff5eb); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.25rem; color: var(--gm-color-primary); transition: all 0.3s ease; }
.gm-add-platform-card:hover .gm-add-platform-icon { background: linear-gradient(135deg, var(--gm-color-primary), var(--gm-color-primary-dark)); color: var(--gm-color-dark); transform: scale(1.1); }
.gm-add-platform-inner h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; color: inherit; }
.gm-add-platform-inner p { margin: 0; font-size: 0.8rem; opacity: 0.8; }