/* ── Ginni Design System Supplements ── */
/* Accessible focus, typography polish, micro-interactions */

/* ── ACCESSIBILITY ── */

/* Icon-only buttons need visible focus */
.icon-button:focus-visible,
.power:focus-visible,
.nav-item:focus-visible,
.theme-toggle:focus-visible {
  outline: 3px solid #0071e3;
  outline-offset: 2px;
}

[data-theme="dark"] .icon-button:focus-visible,
[data-theme="dark"] .power:focus-visible,
[data-theme="dark"] .nav-item:focus-visible,
[data-theme="dark"] .theme-toggle:focus-visible {
  outline-color: #40a9ff;
}

/* Touch: prevent 300ms delay on mobile */
button, a, input, select, .nav-item, .filter-chip {
  touch-action: manipulation;
}

/* ── TYPOGRAPHY ── */

/* Headings: prevent widow words */
h1, h2, .hero-title, .section-title {
  text-wrap: balance;
}

/* Metrics: tabular numbers keep columns aligned */
.metrics strong,
.alexa-metrics strong,
.overview-metrics strong {
  font-variant-numeric: tabular-nums;
}

/* Loading / truncated text safety */
.device-head strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── MOTION ── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .feature-card:hover {
    transform: none;
  }

  .spin {
    animation: none;
  }
}

/* Only animate compositor-friendly properties */
.feature-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ── HIT TARGETS ── */

/* Minimum 44px touch targets everywhere */
.nav-item,
.filter-chip,
.card-actions button,
.subtle,
.auth-tab {
  min-height: 44px;
}

/* ── CONTENT STATES ── */

/* Empty state polish */
.notification-empty {
  padding: 32px 0;
}

/* Long content in cards */
.scene-actions span,
.device-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── MICRO-INTERACTIONS ── */

/* Button press feel */
button:active:not(:disabled) {
  transform: scale(0.97);
}

.nav-item:active {
  transform: scale(0.98);
}

/* Card hover lift */
.device-card,
.account-card,
.admin-integration-card {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.device-card:hover,
.account-card:hover,
.admin-integration-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.12);
}

[data-theme="dark"] .device-card:hover,
[data-theme="dark"] .account-card:hover,
[data-theme="dark"] .admin-integration-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.4);
}

/* ── SURFACE POLISH ── */

/* Input/select: smoother focus transition */
input, select {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ── NOTIFICATION PANEL ── */

/* Smooth unread badge pulse (only first load) */
.notification-badge {
  animation: badgeIn 0.3s ease;
}

@keyframes badgeIn {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── FILTER CHIPS ── */

.filter-chip {
  transition: background 0.15s ease, color 0.15s ease;
}

/* ── MOBILE RESPONSIVENESS ── */

@media (max-width: 880px) {
  .shell {
    grid-template-columns: 1fr;
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .nav-item {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
}