/* STREAMPAD REFERENCE LOCK - Part 4: Pad Cards */

/* Size variables */
body[data-grid-size="s"] {
  --pad-column-width: 112px;
  --grid-card-height: 144px;
  --pad-icon-size: 58px;
  --pad-padding: 9px;
  --pad-gap: 7px;
  --pad-title-size: 11px;
  --pad-badge-size: 8px;
}
body[data-grid-size="m"] {
  --pad-column-width: 128px;
  --grid-card-height: 160px;
  --pad-icon-size: 68px;
  --pad-padding: 10px;
  --pad-gap: 8px;
  --pad-title-size: 12px;
  --pad-badge-size: 9px;
}
body[data-grid-size="l"] {
  --pad-column-width: 146px;
  --grid-card-height: 176px;
  --pad-icon-size: 78px;
  --pad-padding: 11px;
  --pad-gap: 9px;
  --pad-title-size: 13px;
  --pad-badge-size: 9px;
}
body[data-grid-size="xl"] {
  --pad-column-width: 164px;
  --grid-card-height: 192px;
  --pad-icon-size: 88px;
  --pad-padding: 12px;
  --pad-gap: 10px;
  --pad-title-size: 14px;
  --pad-badge-size: 10px;
}

body[data-grid-size="s"][data-pad-columns="16"] {
  --pad-column-width: 92px;
  --grid-card-height: 120px;
  --pad-icon-size: 46px;
  --pad-padding: 7px;
  --pad-gap: 5px;
  --pad-title-size: 10px;
  --pad-badge-size: 7px;
}

body[data-grid-size="m"][data-pad-columns="16"] {
  --pad-column-width: 102px;
  --grid-card-height: 134px;
  --pad-icon-size: 54px;
  --pad-padding: 8px;
  --pad-gap: 6px;
  --pad-title-size: 11px;
  --pad-badge-size: 8px;
}

body[data-grid-size="l"][data-pad-columns="16"] {
  --pad-column-width: 114px;
  --grid-card-height: 148px;
  --pad-icon-size: 62px;
  --pad-padding: 8px;
  --pad-gap: 6px;
  --pad-title-size: 12px;
  --pad-badge-size: 8px;
}

body[data-grid-size="xl"][data-pad-columns="16"] {
  --pad-column-width: 126px;
  --grid-card-height: 162px;
  --pad-icon-size: 70px;
  --pad-padding: 9px;
  --pad-gap: 7px;
  --pad-title-size: 12px;
  --pad-badge-size: 9px;
}

/* Pad card */
.pad-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pad-gap, 9px);
  padding: var(--pad-padding, 12px) var(--pad-padding, 12px) calc(var(--pad-padding, 12px) - 2px);
  min-height: var(--grid-card-height, 192px);
  height: var(--grid-card-height, 192px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.048), rgba(255,255,255,0.015)),
    rgba(13,17,29,0.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 14px 32px rgba(0,0,0,0.28);
  cursor: pointer;
  transition:
    transform var(--dur-slow, 220ms) var(--ease-standard, ease),
    border-color var(--dur-slow, 220ms) var(--ease-standard, ease),
    box-shadow var(--dur-slow, 220ms) var(--ease-standard, ease);
  overflow: hidden;
  width: 100%;
}

.pad-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 42px rgba(0,0,0,0.38),
    0 0 22px rgba(255,45,141,0.08);
}

/* Press feedback — quick scale-down so a tap feels physical. */
.pad-card:active {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur-fast, 120ms);
}

/* Keyboard focus ring (does not show on mouse click). */
.pad-card:focus-visible {
  outline: none;
  border-color: rgba(255,45,141,0.85);
  box-shadow:
    0 0 0 2px var(--bg, #080d18),
    0 0 0 4px rgba(255,45,141,0.65);
}

.pad-card.is-selected {
  border-color: rgba(255,45,141,0.85);
  box-shadow:
    0 0 0 1px rgba(255,45,141,0.25),
    0 0 28px rgba(255,45,141,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Currently playing — pulsing green edge so the active pad is obvious at a
   glance on the board (mirrors the remote panel's playing treatment). */
.pad-card.is-playing {
  border-color: rgba(52, 211, 153, 0.6);
  animation: pad-playing-pulse 1.8s ease-in-out infinite;
}

.pad-card.is-playing::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.45);
}

@keyframes pad-playing-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 14px 32px rgba(0,0,0,0.28),
      0 0 0 0 rgba(52, 211, 153, 0.22);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 14px 32px rgba(0,0,0,0.28),
      0 0 22px 2px rgba(52, 211, 153, 0.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pad-card.is-playing {
    animation: none;
  }
}

.pad-card.is-disabled { opacity: 0.48; }
.pad-card.is-hidden-pad {
  opacity: 0.78;
  box-shadow: inset 0 0 0 1px rgba(255, 208, 99, 0.22);
}

/* Image / icon - no inner box */
.pad-thumb, .pad-fallback {
  width: var(--pad-icon-size, 90px);
  height: var(--pad-icon-size, 90px);
  min-height: 0 !important;
  margin: 4px auto 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
}

.pad-thumb {
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 0 16px rgba(255,255,255,0.20))
    drop-shadow(0 10px 20px rgba(0,0,0,0.24));
}

.pad-fallback {
  display: grid;
  place-items: center;
  font-size: calc(var(--pad-icon-size, 90px) * 0.5);
  font-weight: 800;
  line-height: 1;
  color: #fff2fb;
  text-shadow: 0 0 18px rgba(255,45,141,0.26);
  letter-spacing: 0.05em;
}

.pad-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.pad-title {
  margin: 0;
  font-size: var(--pad-title-size, 14px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: #EEF2FF;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pad-subtitle { display: none; }

.pad-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: auto;
}

.pad-badge {
  display: grid;
  grid-template-columns: 7px auto 7px;
  align-items: center;
  column-gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: none;
  font-size: var(--pad-badge-size, 11px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pad-badge-label {
  text-align: center;
  white-space: nowrap;
}

.pad-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}

.pad-badge-spacer {
  width: 6px;
  height: 6px;
  opacity: 0;
}

/* Badge colors */
.pad-type-badge { background: rgba(255,45,141,0.14); color: #FF4DA6; }

.pad-card[data-pad-type="animation"] .pad-type-badge { background: rgba(255,45,141,0.14); color: #FF4DA6; }
.pad-card[data-pad-type="audio"] .pad-type-badge { background: rgba(141,92,246,0.16); color: #A987FF; }
.pad-card[data-pad-type="video"] .pad-type-badge { background: rgba(56,130,246,0.16); color: #72C7FF; }
.pad-card[data-pad-type="hotkey"] .pad-type-badge { background: rgba(34,197,94,0.14); color: #6EE7B7; }
.pad-card[data-pad-type="url"] .pad-type-badge { background: rgba(251,146,60,0.14); color: #FDBA74; }
.pad-card[data-pad-type="program"] .pad-type-badge { background: rgba(141,92,246,0.14); color: #B7A7FF; }

/* Menu dots */
.pad-menu-btn {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,0.58);
  font-size: 0;
  cursor: pointer;
  transition: all var(--dur-fast, 140ms) ease;
}

.pad-menu-btn::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.pad-menu-btn svg { display: none; }

.pad-menu-btn:hover {
  color: #ffffff;
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
}

/* Add pad card */
.pad-card-add {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--grid-card-height, 192px);
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.006)),
    rgba(13,17,29,0.88) !important;
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--dur-base, 150ms) var(--ease-standard, ease), background var(--dur-base, 150ms) var(--ease-standard, ease);
}

.pad-card-add:hover {
  border-color: rgba(255,45,141,0.30) !important;
  background: rgba(255,45,141,0.04) !important;
}

.pad-add-plus { font-size: 36px; line-height: 1; color: #a8a0c0; }
.pad-add-label { font-size: 13px; font-weight: 700; color: #c0b8d4; }