/* Tribal Tools — Custom styles */

/* Input fields */
.input-field {
  @apply w-full px-3 py-2 bg-surface-800 border border-surface-700 rounded-lg text-gray-200
    focus:outline-none focus:ring-2 focus:ring-brand-500/50 focus:border-brand-500
    placeholder-gray-500 transition-colors;
}

.select-field {
  @apply w-full px-3 py-2 bg-surface-800 border border-surface-700 rounded-lg text-gray-200
    focus:outline-none focus:ring-2 focus:ring-brand-500/50 focus:border-brand-500
    transition-colors appearance-none cursor-pointer;
}

/* Buttons */
.btn-primary {
  @apply px-4 py-2 bg-brand-600 hover:bg-brand-700 text-white font-medium rounded-lg
    transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500/50
    disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-secondary {
  @apply px-4 py-2 bg-surface-700 hover:bg-surface-600 text-gray-200 font-medium rounded-lg
    transition-colors focus:outline-none focus:ring-2 focus:ring-surface-500/50;
}

.btn-danger {
  @apply px-4 py-2 bg-red-700 hover:bg-red-600 text-white font-medium rounded-lg
    transition-colors focus:outline-none;
}

.btn-sm {
  @apply px-3 py-1.5 text-sm;
}

/* Navigation */
.nav-link {
  @apply flex items-center gap-3 px-4 py-2.5 text-gray-400 hover:text-gray-200
    hover:bg-surface-800 transition-colors text-sm;
}

.nav-link.active {
  @apply text-brand-400 bg-brand-900/20 border-r-2 border-brand-400;
}

.nav-link i {
  @apply text-lg w-5 text-center;
}

/* Cards */
.card {
  @apply bg-surface-900 border border-surface-700 rounded-xl p-5;
}

.card-header {
  @apply text-lg font-semibold text-gray-100 mb-4;
}

/* Tables */
.data-table {
  @apply w-full text-sm;
}

.data-table thead {
  @apply border-b border-surface-700;
}

.data-table th {
  @apply text-left py-3 px-3 text-gray-400 font-medium text-xs uppercase tracking-wider;
}

.data-table td {
  @apply py-2.5 px-3 border-b border-surface-800;
}

.data-table tr:hover td {
  @apply bg-surface-800/50;
}

/* Badge */
.badge {
  @apply inline-block px-2 py-0.5 text-xs font-medium rounded-full;
}

.badge-green { @apply bg-green-900/40 text-green-400 border border-green-700; }
.badge-red { @apply bg-red-900/40 text-red-400 border border-red-700; }
.badge-yellow { @apply bg-yellow-900/40 text-yellow-400 border border-yellow-700; }
.badge-blue { @apply bg-blue-900/40 text-blue-400 border border-blue-700; }

/* Stat card */
.stat-card {
  @apply card flex flex-col items-center text-center;
}

.stat-value {
  @apply text-2xl font-bold text-brand-400;
}

.stat-label {
  @apply text-xs text-gray-500 mt-1;
}

/* Tags / chips */
.tag {
  @apply inline-flex items-center gap-1 px-2 py-1 bg-surface-800 border border-surface-700
    rounded text-xs text-gray-300 cursor-pointer hover:border-brand-500;
}

.tag.selected {
  @apply border-brand-500 bg-brand-900/30 text-brand-300;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.2s ease-out; }

@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* Leaflet map overrides */
.leaflet-container { background: #0f172a !important; }
.leaflet-control-zoom a { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; }

/* Loading spinner */
.spinner {
  @apply inline-block w-5 h-5 border-2 border-gray-600 border-t-brand-400 rounded-full;
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
  @apply px-4 py-3 rounded-lg shadow-lg text-sm max-w-sm fade-in;
}

.toast-success { @apply bg-green-900/90 text-green-200 border border-green-700; }
.toast-error { @apply bg-red-900/90 text-red-200 border border-red-700; }
.toast-info { @apply bg-blue-900/90 text-blue-200 border border-blue-700; }

/* Responsive sidebar */
@media (max-width: 1023px) {
  #sidebar { position: fixed; left: 0; top: 0; z-index: 40; }
  #sidebar:not(.hidden) { display: flex !important; animation: slideIn 0.2s ease-out; }
}