/* Lush Labs Natural Operations Platform - Custom Styles */

/* Custom color scheme for natural skincare theme */
:root {\n  --primary-color: #059669;\n  --primary-light: #10B981;\n  --secondary-color: #047857;\n  --accent-color: #34D399;\n  --success-color: #10B981;\n  --warning-color: #F59E0B;\n  --danger-color: #EF4444;\n  --info-color: #3B82F6;\n}\n\n/* Login form styles */\n.login-container {\n  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);\n  min-height: 100vh;\n}\n\n/* Dashboard cards */\n.dashboard-card {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  transition: all 0.3s ease;\n}\n\n.dashboard-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n/* Status badges */\n.status-badge {\n  display: inline-block;\n  padding: 0.25rem 0.75rem;\n  border-radius: 9999px;\n  font-size: 0.875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.025em;\n}\n\n.status-pending { background-color: #FEF3C7; color: #92400E; }\n.status-processing { background-color: #DBEAFE; color: #1E40AF; }\n.status-quality-check { background-color: #FDE68A; color: #B45309; }\n.status-packing { background-color: #D1FAE5; color: #047857; }\n.status-shipped { background-color: #A7F3D0; color: #065F46; }\n.status-delivered { background-color: #BBF7D0; color: #14532D; }\n.status-cancelled { background-color: #FECACA; color: #991B1B; }\n\n/* Priority indicators */\n.priority-1 { border-left: 4px solid var(--info-color); }\n.priority-2 { border-left: 4px solid var(--warning-color); }\n.priority-3 { border-left: 4px solid var(--danger-color); }\n\n/* Stock level indicators */\n.stock-ok { color: var(--success-color); }\n.stock-low { color: var(--warning-color); }\n.stock-critical { color: var(--danger-color); }\n.stock-stockout { color: var(--danger-color); font-weight: bold; }\n\n/* Alert styles */\n.alert {\n  padding: 1rem;\n  border-radius: 8px;\n  border-left: 4px solid;\n  margin-bottom: 1rem;\n}\n\n.alert-info { background-color: #EBF8FF; border-left-color: var(--info-color); color: #2B6CB0; }\n.alert-success { background-color: #F0FDF4; border-left-color: var(--success-color); color: #166534; }\n.alert-warning { background-color: #FFFBEB; border-left-color: var(--warning-color); color: #92400E; }\n.alert-danger { background-color: #FEF2F2; border-left-color: var(--danger-color); color: #991B1B; }\n\n/* Navigation styles */\n.nav-link {\n  display: flex;\n  align-items: center;\n  padding: 0.75rem 1rem;\n  color: #6B7280;\n  text-decoration: none;\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  margin-bottom: 0.25rem;\n}\n\n.nav-link:hover {\n  background-color: #F3F4F6;\n  color: var(--primary-color);\n}\n\n.nav-link.active {\n  background-color: var(--primary-color);\n  color: white;\n}\n\n.nav-link i {\n  margin-right: 0.75rem;\n  width: 1.25rem;\n  text-align: center;\n}\n\n/* Table styles */\n.data-table {\n  width: 100%;\n  background: white;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.data-table th {\n  background-color: #F9FAFB;\n  padding: 0.75rem 1rem;\n  text-align: left;\n  font-weight: 600;\n  color: #374151;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.data-table td {\n  padding: 0.75rem 1rem;\n  border-bottom: 1px solid #F3F4F6;\n}\n\n.data-table tr:hover {\n  background-color: #F9FAFB;\n}\n\n/* Form styles */\n.form-input {\n  width: 100%;\n  padding: 0.75rem;\n  border: 1px solid #D1D5DB;\n  border-radius: 8px;\n  font-size: 1rem;\n  transition: border-color 0.2s ease;\n}\n\n.form-input:focus {\n  outline: none;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px rgba(139, 90, 60, 0.1);\n}\n\n.form-label {\n  display: block;\n  font-weight: 600;\n  color: #374151;\n  margin-bottom: 0.5rem;\n}\n\n/* Button styles */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.75rem 1.5rem;\n  border-radius: 8px;\n  font-weight: 600;\n  text-decoration: none;\n  transition: all 0.2s ease;\n  cursor: pointer;\n  border: none;\n  font-size: 1rem;\n}\n\n.btn-primary {\n  background-color: var(--primary-color);\n  color: white;\n}\n\n.btn-primary:hover {\n  background-color: #7A4D32;\n}\n\n.btn-secondary {\n  background-color: #6B7280;\n  color: white;\n}\n\n.btn-secondary:hover {\n  background-color: #4B5563;\n}\n\n.btn-success {\n  background-color: var(--success-color);\n  color: white;\n}\n\n.btn-success:hover {\n  background-color: #059669;\n}\n\n.btn-warning {\n  background-color: var(--warning-color);\n  color: white;\n}\n\n.btn-warning:hover {\n  background-color: #D97706;\n}\n\n.btn-danger {\n  background-color: var(--danger-color);\n  color: white;\n}\n\n.btn-danger:hover {\n  background-color: #DC2626;\n}\n\n/* Loading spinner */\n.spinner {\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 2px solid #E5E7EB;\n  border-top: 2px solid var(--primary-color);\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n/* Responsive design */\n@media (max-width: 768px) {\n  .dashboard-card {\n    margin-bottom: 1rem;\n  }\n  \n  .data-table {\n    font-size: 0.875rem;\n  }\n  \n  .btn {\n    padding: 0.625rem 1.25rem;\n    font-size: 0.875rem;\n  }\n}\n\n/* Dark mode support (optional) */\n@media (prefers-color-scheme: dark) {\n  .dark-mode {\n    background-color: #1F2937;\n    color: #F9FAFB;\n  }\n  \n  .dark-mode .dashboard-card {\n    background-color: #374151;\n    border-color: #4B5563;\n  }\n  \n  .dark-mode .data-table th {\n    background-color: #4B5563;\n    color: #F9FAFB;\n  }\n}