/* ================================================================
   HAPPIE HUB DASHBOARD — PREMIUM POLISH LAYER
   Drop-in CSS file that adds micro-animations, glassmorphism,
   smooth transitions, and modern feel. Zero JS changes needed.
   ================================================================ */

/* ── 1. SMOOTH TAB TRANSITIONS ── */
/* Instead of hard show/hide, tabs now fade-slide in */
.tab-content {
  display: none;
  opacity: 0;
  transform: translateY(8px);
}
.tab-content.active {
  display: block;
  animation: tabFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 2. METRIC CARD PREMIUM HOVER ── */
/* Subtle glow + lift on hover instead of just translateY */
.metric-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease;
}
.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(18, 52, 88, 0.12);
}
.metric-card.blue:hover   { box-shadow: 0 12px 40px rgba(18, 52, 88, 0.18); }
.metric-card.green:hover  { box-shadow: 0 12px 40px rgba(0, 184, 148, 0.18); }
.metric-card.gold:hover   { box-shadow: 0 12px 40px rgba(244, 180, 0, 0.18); }
.metric-card.red:hover    { box-shadow: 0 12px 40px rgba(231, 76, 60, 0.18); }

/* ── 3. ANIMATED METRIC VALUES ── */
/* Numbers smoothly count up instead of snapping */
.metric-val {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.metric-progress-fill {
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 4. CARD GLASSMORPHISM (SUBTLE) ── */
/* Cards get a frosted feel on hover */
.card, .card-sm {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 8px 32px rgba(18, 52, 88, 0.1);
}

/* ── 5. BUTTON PRESS FEEDBACK ── */
/* Buttons scale down slightly on click for tactile feel */
.btn:active,
.action-btn:active,
.login-btn:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s !important;
}

/* ── 6. QUICK ACTION CARDS ── */
/* Add icon bounce on hover */
.action-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.action-btn:hover .action-icon {
  animation: iconBounce 0.4s ease;
}
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-4px); }
  60%      { transform: translateY(-2px); }
}

/* ── 7. TABLE ROW TRANSITIONS ── */
/* Rows slide-highlight instead of instant color change */
tbody tr {
  transition: background-color 0.15s ease;
}

/* ── 8. BADGE ENTRANCE ANIMATION ── */
/* Badges pop in when first rendered */
.badge {
  animation: badgePop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes badgePop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── 9. SIDEBAR NAV ITEM TRANSITIONS ── */
/* Smoother active state transitions */
.nav-item {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item:hover {
  padding-left: 24px;
}
.nav-item.active {
  padding-left: 24px;
}

/* ── 10. TOPBAR FROSTED GLASS ── */
/* Subtle glass effect on the top bar */
.topbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .topbar {
  background: rgba(26, 29, 39, 0.85);
}

/* ── 11. FORM INPUT FOCUS GLOW ── */
/* Inputs glow emerald on focus */
.form-input:focus,
.login-input:focus,
.filter-select:focus,
.search-bar:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.15);
  border-color: var(--emerald);
}

/* ── 12. IMPROVED SKELETON SHIMMER ── */
/* Smoother, more realistic loading skeleton */
.skeleton {
  background: linear-gradient(
    110deg,
    #f0f0f0 30%,
    #e4e4e4 50%,
    #f0f0f0 70%
  );
  background-size: 300% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: 8px;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    110deg,
    #22252f 30%,
    #2d3140 50%,
    #22252f 70%
  );
  background-size: 300% 100%;
}

/* ── 13. NOTIFICATION PANEL SLIDE ── */
/* Smoother slide-in with spring physics feel */
.notif-panel {
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 14. ROOM CARD INTERACTIONS ── */
/* Room cards get a subtle pulse when occupied */
.room-card {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.room-card:hover {
  transform: translateY(-3px) scale(1.03);
}

/* ── 15. SCROLL PROGRESS INDICATOR ── */
/* Thin emerald line at the top showing scroll progress */
.main::before {
  content: '';
  position: fixed;
  top: var(--topbar-h);
  left: var(--sidebar-w);
  right: 0;
  height: 2px;
  background: var(--emerald);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 51;
  animation: none;
  pointer-events: none;
}

/* ── 16. MODAL ENTRANCE ── */
/* Smoother modal entrance with spring ease */
.modal {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.confirm-box {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cmd-box {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 17. FOCUS RING FOR ACCESSIBILITY ── */
/* Visible focus ring for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Remove default outlines since we handle it above */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ── 18. DETAIL TAB PILL TRANSITION ── */
/* Smooth pill slide on tenant detail tabs */
.detail-tab {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.detail-tab:hover:not(.active) {
  background: rgba(0, 184, 148, 0.06);
  color: var(--dark);
}
.detail-tab.active {
  box-shadow: 0 2px 8px rgba(18, 52, 88, 0.1);
}

/* ── 19. TOAST ENTRANCE ── */
/* Toast slides in with spring physics */
.toast {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.show {
  transform: translateX(0);
}

/* ── 20. CHART BAR ANIMATION ── */
/* Bars grow from bottom with stagger delay */
.chart-bar-fill {
  transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom;
}

/* ── 21. PRINT STYLES ── */
/* Clean print output without UI chrome */
@media print {
  .sidebar,
  .topbar,
  .mobile-nav,
  .notif-panel,
  .notif-backdrop,
  .cmd-overlay,
  .toast-container,
  .modal-overlay,
  .confirm-overlay,
  .hamburger,
  .notif-btn,
  .logout-btn,
  .setup-wizard {
    display: none !important;
  }
  .main {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 16px !important;
  }
  .card, .card-sm, .metric-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }
  .tab-content.active {
    animation: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
  a { color: inherit !important; }
}

/* ── 22. REDUCED MOTION ── */
/* Respect user's motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .tab-content.active {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .skeleton {
    animation: none;
  }
}

/* ── 23. SELECTION COLOR IN DARK MODE ── */
[data-theme="dark"] ::selection {
  background: var(--emerald);
  color: white;
}

/* ── 24. SCROLLBAR IN DARK MODE ── */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f1117;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #333850;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--emerald);
}