/* Global CSS for ShipStation API Admin Dashboard */

/* Import fonts from CDN */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/clash-display');

/* CSS Variables for theme */
:root {
  --primary: #ea580c;
  --primary-light: #fb923c;
  --primary-dark: #c2410c;
  --primary-50: #fff7ed;
  --primary-100: #ffedd5;
  --primary-200: #fed7aa;
  --primary-300: #fdba74;
  --primary-400: #fb923c;
  --primary-500: #ea580c;
  --primary-600: #dc2626;
  --primary-700: #c2410c;
  --primary-800: #9a3412;
  --primary-900: #7c2d12;
  
  --background: #ffffff;
  --surface: #f8fafc;
  --surface-hover: #f1f5f9;
  
  --text: #1f2937;
  --text-muted: #6b7280;
  --text-light: #9ca3af;
  
  --border: #e5e7eb;
  --border-light: #f3f4f6;
  
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Typography */
.font-heading {
  font-family: 'Clash Display', sans-serif;
  font-weight: 600;
}

.font-body {
  font-family: 'Poppins', sans-serif;
}

/* Base styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--background);
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Custom button styles */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-orange-600 hover:bg-orange-700 text-white font-medium py-2 px-4 rounded-lg transition-colors focus:ring-orange-500;
}

.btn-secondary {
  @apply bg-gray-100 hover:bg-gray-200 text-gray-900 font-medium py-2 px-4 rounded-lg transition-colors focus:ring-gray-500;
}

.btn-success {
  @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors focus:ring-green-500;
}

.btn-warning {
  @apply bg-yellow-600 hover:bg-yellow-700 text-white font-medium py-2 px-4 rounded-lg transition-colors focus:ring-yellow-500;
}

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

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

.btn-lg {
  @apply px-6 py-3 text-base;
}

/* Card styles */
.card {
  @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
}

.card-header {
  @apply border-b border-gray-200 pb-4 mb-4;
}

.card-title {
  @apply text-lg font-semibold text-gray-900 font-heading;
}

.card-subtitle {
  @apply text-sm text-gray-600 mt-1;
}

/* Form styles */
.form-group {
  @apply mb-4;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors;
}

.form-input:focus {
  @apply outline-none;
}

.form-error {
  @apply text-red-600 text-sm mt-1;
}

.form-help {
  @apply text-gray-500 text-sm mt-1;
}

/* Table styles */
.table-container {
  @apply overflow-x-auto shadow-sm rounded-lg border border-gray-200;
}

.table {
  @apply min-w-full divide-y divide-gray-200;
}

.table thead {
  @apply bg-gray-50;
}

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

.table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.table tbody tr:hover {
  @apply bg-gray-50;
}

.table tbody tr:nth-child(even) {
  @apply bg-white;
}

/* Status badges */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
  @apply bg-red-100 text-red-800;
}

.badge-info {
  @apply bg-blue-100 text-blue-800;
}

.badge-gray {
  @apply bg-gray-100 text-gray-800;
}

/* Navigation styles */
.nav {
  @apply flex space-x-1;
}

.nav-item {
  @apply px-3 py-2 rounded-md text-sm font-medium transition-colors;
}

.nav-item.active {
  @apply bg-orange-100 text-orange-700;
}

.nav-item:hover:not(.active) {
  @apply bg-gray-100 text-gray-700;
}

/* Sidebar styles */
.sidebar {
  @apply w-64 bg-white shadow-lg border-r border-gray-200;
}

.sidebar-header {
  @apply p-6 border-b border-gray-200;
}

.sidebar-nav {
  @apply px-4 py-6 space-y-2;
}

.sidebar-nav-item {
  @apply flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors;
}

.sidebar-nav-item.active {
  @apply bg-orange-100 text-orange-700;
}

.sidebar-nav-item:hover:not(.active) {
  @apply bg-gray-100 text-gray-700;
}

.sidebar-nav-icon {
  @apply w-5 h-5 mr-3;
}

/* Dashboard stats */
.stat-card {
  @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
}

.stat-value {
  @apply text-2xl font-bold text-gray-900 font-heading;
}

.stat-label {
  @apply text-sm font-medium text-gray-600;
}

.stat-change {
  @apply text-sm font-medium;
}

.stat-change.positive {
  @apply text-green-600;
}

.stat-change.negative {
  @apply text-red-600;
}

/* Modal styles */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal {
  @apply bg-white rounded-xl shadow-xl max-w-md w-full mx-4;
}

.modal-header {
  @apply px-6 py-4 border-b border-gray-200;
}

.modal-title {
  @apply text-lg font-semibold text-gray-900 font-heading;
}

.modal-body {
  @apply px-6 py-4;
}

.modal-footer {
  @apply px-6 py-4 border-t border-gray-200 flex justify-end space-x-3;
}

/* Loading spinner */
.spinner {
  @apply animate-spin rounded-full h-4 w-4 border-b-2 border-orange-600;
}

/* Alert styles */
.alert {
  @apply p-4 rounded-lg border;
}

.alert-success {
  @apply bg-green-50 border-green-200 text-green-800;
}

.alert-warning {
  @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.alert-error {
  @apply bg-red-50 border-red-200 text-red-800;
}

.alert-info {
  @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* Utility classes */
.text-primary {
  color: var(--primary);
}

.bg-primary {
  background-color: var(--primary);
}

.border-primary {
  border-color: var(--primary);
}

.ring-primary {
  --tw-ring-color: var(--primary);
}

/* Responsive design */
@media (max-width: 768px) {
  .sidebar {
    @apply w-full;
  }
  
  .table-container {
    @apply text-xs;
  }
  
  .table th,
  .table td {
    @apply px-3 py-2;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

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

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .table {
    @apply text-xs;
  }
}