/**
 * Modern UI - Hover designs for cards, tables, buttons
 */

/* Dashboard stat cards - lift on hover */
.dashboard-stat-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.dashboard-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.12) !important;
  border-color: #cbd5e1 !important;
}

/* Quick action cards - already have hover in home.php, enhance */
.quick-action-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.quick-action-card:hover {
  transform: translateY(-4px);
}

/* Live activity box - subtle pulse */
.live-activity-box .live-pulse {
  animation: livePulse 2s ease-in-out infinite;
  font-size: 0.6em;
  vertical-align: middle;
  color: #86efac;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Table rows - hover highlight */
.table-hover tbody tr,
.live-activity-box table tbody tr {
  transition: background-color 0.2s ease;
}
.live-activity-box table tbody tr:hover {
  background-color: #f0fdf4 !important;
}

/* Box cards - hover border glow */
.box {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.box:hover {
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.08);
}

/* Buttons - smooth hover */
.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

/* M-Pesa prompt modal - modern card */
.mpesa-prompt-modal .modal-content {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.mpesa-prompt-modal .mpesa-detail-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mpesa-prompt-modal .mpesa-detail-item:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* POS cart items - hover */
.pos-scanned-items .newProduct .row:hover,
.pos-cart .newProduct .row:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* Sidebar menu items */
.sidebar-menu li a {
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}
.sidebar-menu li a:hover {
  padding-left: 18px !important;
}