/* Common Styles for CRM System */
.header-custom { 
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); 
}

.nav-custom { 
  background: white; 
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

.card-custom { 
  border: none; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.1); 
}

.table-hover tbody tr:hover { 
  background-color: rgba(0,123,255,0.05); 
}

.btn-action { 
  margin: 2px; 
  padding: 0.25rem 0.5rem; 
  font-size: 0.875rem; 
}

/* Stat Cards */
.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.stat-card:hover { 
  transform: translateY(-5px); 
}

.stat-card:nth-child(2) { 
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
}

.stat-card:nth-child(3) { 
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); 
}

.stat-card:nth-child(4) { 
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); 
}

.stat-number { 
  font-size: 2.5rem; 
  font-weight: bold; 
  margin-bottom: 0.5rem; 
}

.stat-label { 
  font-size: 1.1rem; 
  opacity: 0.9; 
}

/* PM Schedule specific */
.due-soon { 
  background-color: rgba(255, 193, 7, 0.1) !important; 
}

.overdue { 
  background-color: rgba(220, 53, 69, 0.1) !important; 
}

.device-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ced4da;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.suggestion-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #f8f9fa;
}

.suggestion-item:hover {
  background-color: #f8f9fa;
}

/* Chart container */
.chart-container { 
  background: white; 
  border-radius: 12px; 
  padding: 20px; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.1); 
}