/* CNPT SIM Activation Prototype Styles */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --cnpt-red: #e02b20;
  --cnpt-red-dark: #b81e14;
  --cnpt-green: #0ea5e9;
  --cnpt-navy: #0f172a;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Mobile Frame simulation */
.mobile-frame-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 65px);
  padding: 20px 10px 40px;
  background: #e2e8f0;
}

.mobile-phone-device {
  width: 100%;
  max-width: 412px;
  min-height: 840px;
  background: #ffffff;
  border-radius: 40px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 10px #1e293b;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.mobile-phone-notch {
  height: 28px;
  background: #1e293b;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  width: 160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}

.mobile-phone-speaker {
  width: 48px;
  height: 4px;
  background: #475569;
  border-radius: 2px;
}

.mobile-phone-camera {
  width: 8px;
  height: 8px;
  background: #0ea5e9;
  border-radius: 50%;
}

.mobile-status-bar {
  padding: 8px 18px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  z-index: 40;
}

/* Pulsing effect for timer within 30 seconds */
@keyframes timerPulse {
  0%, 100% {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    background-color: #fecaca;
    border-color: #dc2626;
    color: #991b1b;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

.timer-warning-pulse {
  animation: timerPulse 1.2s infinite ease-in-out;
}

/* Camera scan animation */
@keyframes scanBeam {
  0% {
    top: 5%;
  }
  50% {
    top: 85%;
  }
  100% {
    top: 5%;
  }
}

.scanner-laser {
  position: absolute;
  left: 5%;
  right: 5%;
  height: 3px;
  background: #ef4444;
  box-shadow: 0 0 12px 3px #ef4444;
  animation: scanBeam 2s infinite linear;
}

/* Badge styles */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
}

.badge-success {
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.badge-warning {
  background-color: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.badge-danger {
  background-color: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.badge-info {
  background-color: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

/* Ripple button transition */
.btn-touch {
  transition: all 0.15s ease-in-out;
}
.btn-touch:active {
  transform: scale(0.97);
}

/* Full Desktop Layout Rules */
.view-mobile .hide-in-mobile {
  display: none !important;
}

.view-full .mobile-phone-device {
  max-width: 100% !important;
  min-height: calc(100vh - 65px) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.view-full .mobile-frame-container {
  padding: 0 !important;
  background: #f8fafc !important;
}

.view-full .mobile-phone-notch,
.view-full .mobile-status-bar {
  display: none !important;
}

/* Desktop Sidebar Styling */
.desktop-sidebar-nav {
  width: 260px;
  background: #0f172a;
  color: #94a3b8;
  flex-shrink: 0;
  min-height: calc(100vh - 65px);
  border-right: 1px solid #1e293b;
}

.desktop-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  transition: all 0.15s ease;
}

.desktop-nav-link:hover {
  color: #ffffff;
  background: #1e293b;
}

.desktop-nav-link.active {
  color: #ffffff;
  background: #e02b20;
}

/* Statistics KPI and Breakdown styles */
.kpi-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.kpi-card.active-filter {
  box-shadow: 0 0 0 2px #4f46e5;
}
.stat-list-container {
  max-height: 360px;
  overflow-y: auto;
}
.stat-item {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.stat-item:hover {
  background-color: #f8fafc;
}
.stat-item.active-item {
  background-color: #e0e7ff;
}
.badge-unrotated-critical {
  background-color: #dc2626;
  color: #fff;
}
.badge-unrotated-warning {
  background-color: #f59e0b;
  color: #fff;
}

/* Mobile Phone Device Frame Overrides & Safety */
.view-mobile .mobile-phone-device {
  max-width: 412px !important;
  width: 100% !important;
  margin: 0 auto;
}

.view-mobile .mobile-phone-device main {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Force 1-column layouts inside mobile phone container regardless of host monitor width */
.view-mobile .mobile-phone-device [class*="lg:grid-cols-12"],
.view-mobile .mobile-phone-device [class*="md:grid-cols-3"],
.view-mobile .mobile-phone-device [class*="lg:grid-cols-"],
.view-mobile .mobile-phone-device [class*="md:grid-cols-"] {
  grid-template-columns: 1fr !important;
  display: flex !important;
  flex-direction: column !important;
}

.view-mobile .mobile-phone-device [class*="lg:col-span-"],
.view-mobile .mobile-phone-device [class*="md:col-span-"] {
  grid-column: span 1 / span 1 !important;
  width: 100% !important;
}



/* Mobile Bottom Navigation Bar within Phone Mockup Frame */
.view-mobile .mobile-phone-device nav.fixed,
.view-mobile .mobile-phone-device nav[class*="bottom-0"] {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 40 !important;
}