/* Material Icons styling */
.material-icons,
.material-icons-outlined,
.material-icons-round {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  color: #9bacd4;  

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
  
  /* Add smooth transition */
  transition: all 0.2s ease-in-out;
}

/* Icon sizes */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Icon colors - explicitly defined to avoid purging */
.material-icons.text-white { color: white; }
.material-icons.text-gray-300 { color: #D1D5DB; }
.material-icons.text-gray-400 { color: #9CA3AF; }
.material-icons.text-gray-500 { color: #6B7280; }
.material-icons.text-blue-500 { color: #3B82F6; }
.material-icons.text-green-500 { color: #10B981; }
.material-icons.text-red-500 { color: #EF4444; }
.material-icons.text-yellow-500 { color: #F59E0B; }
.material-icons.text-indigo-500 { color: #6366F1; }
.material-icons.text-purple-500 { color: #8B5CF6; }

/* Blue world icon specific styling */
.material-icons.world-icon {
  color: #4FACFE;
}

/* Tab icons styling */
.tab .material-icons {
  transition: transform 0.2s ease;
}

.tab:hover .material-icons {
  transform: scale(1.1);
}

.tab.active .material-icons {
  color: white;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}

/* WARNING: Do NOT add global input/select/textarea styles here.
   This file is loaded via base.html which ALL pages extend (including React/frontend_v2).
   Global !important rules here will override scoped styles everywhere.
   Form input styling lives in:
   - frontend_v2: App.css (.form-group input) and world-edit.css (.form-input)
   - frontend (Django templates): styles.css */