/* Admin Design System - Design Tokens & Base Styles */

/* === Color Tokens === */
:root {
  /* Background colors - Elegant warm palette */
  --admin-bg: #f5f4ef;              /* parchment - main background */
  --admin-bg-subtle: #f7f6f2;       /* parchment 600 */
  --admin-card-bg: #ffffff;         /* Pure white for cards */
  --admin-card-bg-alt: #fafaf7;     /* Slightly warm white */
  
  /* Text colors */
  --admin-text-primary: #3c3825;    /* parchment 100 - dark warm */
  --admin-text-secondary: #686763;  /* dim_grey */
  --admin-text-muted: #a5a4a1;      /* dim_grey 700 */
  
  /* Borders */
  --admin-border: #d0cbb4;           /* parchment 400 */
  --admin-border-light: #e5e2d9;    /* soft_linen */
  
  /* Accent - Fresh Produce Green */
  --admin-accent: #16a34a;           /* green-600 - fresh produce brand */
  --admin-accent-hover: #15803d;     /* green-700 */
  --admin-accent-light: #dcfce7;     /* green-100 */
  --admin-accent-text: #166534;      /* green-800 */
  
  /* Status Colors */
  --admin-success: #16a34a;          /* green-600 - fresh produce success */
  --admin-success-accent: #15803d;   /* green-700 */
  --admin-warning: #aba278;          /* parchment 300 */
  --admin-warning-light: #f5f4ef;    /* parchment */
  --admin-danger: #dc2626;           /* red-600 */
  --admin-danger-hover: #b91c1c;     /* red-700 */
  --admin-danger-light: #fef2f2;     /* red-50 */
  --admin-info: #686763;             /* dim_grey */
  --admin-accent-dot: #22c55e;       /* green-500 */
  
  /* Sidebar - Dark elegant */
  --admin-sidebar-bg: #3c3825;       /* parchment 100 */
  --admin-sidebar-text: #c3c3c1;      /* dim_grey 800 */
  --admin-sidebar-hover: #4c4945;     /* dim_grey 200 */
  --admin-sidebar-active: #5c584f;    /* between */
  
  /* Spacing */
  --admin-page-padding: 1rem;         /* px-4 - reduced for density */
  --admin-section-gap: 0.75rem;       /* gap-3 - reduced */
  --admin-card-padding: 1rem;         /* p-4 - reduced */
  
  /* Border Radius */
  --admin-radius-sm: 0.5rem;         /* rounded-lg */
  --admin-radius-md: 0.75rem;       /* rounded-xl */
  --admin-radius-lg: 1rem;           /* rounded-2xl */
  
  /* Shadows - subtle warm shadows */
  --admin-shadow-sm: 0 1px 2px rgba(60, 56, 37, 0.04);
  --admin-shadow-md: 0 4px 12px rgba(60, 56, 37, 0.08);
  --admin-shadow-lg: 0 10px 15px -3px rgba(60, 56, 37, 0.08), 0 4px 6px -4px rgba(60, 56, 37, 0.04);
}

/* === Base Admin Layout === */
.admin-page {
  min-height: 100vh;
  background-color: var(--admin-bg);
  padding: var(--admin-page-padding);
}

.admin-container {
  max-width: 72rem; /* max-w-6xl */
  margin: 0 auto;
}

/* === Admin Card === */
.admin-card {
  background-color: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow-sm);
}

.admin-card-header {
  padding: var(--admin-card-padding);
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-card-body {
  padding: var(--admin-card-padding);
}

/* === Admin Filter Bar === */
.admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-section-gap);
  align-items: center;
  padding: var(--admin-card-padding);
  background-color: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  box-shadow: var(--admin-shadow-sm);
}

/* === Admin Table === */
.admin-table {
  width: 100%;
  text-align: left;
  font-size: 0.8125rem; /* 13px - reduced for density */
}

.admin-table thead {
  background-color: var(--admin-bg);
  border-bottom: 1px solid var(--admin-border);
}

.admin-table th {
  padding: 0.75rem 1rem;             /* py-3 px-4 - reduced for density */
  font-size: 0.5625rem;              /* text-9px - reduced */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--admin-text-muted);
}

.admin-table tbody {
  background-color: var(--admin-card-bg);
}

.admin-table tbody tr {
  border-bottom: 1px solid var(--admin-border-light);
  transition: background-color 150ms;
}

.admin-table tbody tr:hover {
  background-color: rgba(253, 250, 246, 0.5); /* stone-50/40 */
}

.admin-table tbody tr:last-child {
  border-bottom: none;
}

.admin-table td {
  padding: 0.625rem 1rem;            /* py-2.5 px-4 - reduced for density */
  font-size: 0.8125rem;              /* 13px - reduced */
}

/* === Admin Stats Bar === */
.admin-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.admin-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-stat-label {
  font-size: 0.875rem;
  color: var(--admin-text-secondary);
}

.admin-stat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.625rem; /* py-0.5 px-2.5 */
  border-radius: 9999px; /* rounded-full */
  font-size: 0.875rem;
  font-weight: 700;
}

.admin-stat-badge--active {
  background-color: var(--admin-accent-light);
  border: 1px solid var(--admin-accent);
  color: var(--admin-accent-text);
}

.admin-stat-badge--inactive {
  background-color: var(--admin-bg);
  border: 1px solid var(--admin-border);
  color: var(--admin-text-secondary);
}

/* === Admin Button === */
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;        /* reduced padding */
  border-radius: var(--admin-radius-sm);
  font-size: 0.6875rem;              /* reduced from 0.75rem */
  font-weight: 700;
  transition: all 150ms;
}

.admin-btn--primary {
  background-color: var(--admin-accent);
  color: white;
}

.admin-btn--primary:hover {
  background-color: var(--admin-accent-hover);
}

.admin-btn--secondary {
  background-color: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  color: var(--admin-text-secondary);
}

.admin-btn--secondary:hover {
  background-color: var(--admin-bg);
  border-color: var(--admin-text-muted);
}

/* === Admin Input === */
.admin-input {
  flex: 1;
  min-width: 12rem;
  padding: 0.5rem 0.625rem;         /* reduced padding */
  background-color: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  font-size: 0.8125rem;             /* 13px - reduced */
  color: var(--admin-text-primary);
  outline: none;
  transition: border-color 150ms;
}

.admin-input:focus {
  border-color: var(--admin-accent);
}

.admin-input::placeholder {
  color: var(--admin-text-muted);
}

/* === Admin Filter Tabs === */
.admin-filter-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
}

.admin-filter-tab {
  padding: 0.375rem 0.625rem;       /* reduced padding */
  border-radius: var(--admin-radius-sm);
  font-size: 0.6875rem;              /* reduced from 0.75rem */
  font-weight: 600;
  color: var(--admin-text-secondary);
  transition: all 150ms;
}

.admin-filter-tab:hover {
  color: var(--admin-text-primary);
  background-color: rgba(255, 255, 255, 0.5);
}

.admin-filter-tab--active {
  background-color: var(--admin-card-bg);
  color: var(--admin-accent-text);
  border: 1px solid var(--admin-accent);
  box-shadow: var(--admin-shadow-sm);
}

/* === Admin Status Badge === */
.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
}

.admin-status::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
}

.admin-status--active {
  background-color: var(--admin-accent-light);
  color: var(--admin-accent-text);
}

.admin-status--active::before {
  background-color: var(--admin-accent-dot);
}

.admin-status--inactive {
  background-color: var(--admin-bg);
  color: var(--admin-text-muted);
}

.admin-status--inactive::before {
  background-color: var(--admin-text-muted);
}

/* === Admin View Toggle === */
.admin-view-toggle {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
}

.admin-view-btn {
  padding: 0.375rem;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text-secondary);
  transition: all 150ms;
}

.admin-view-btn:hover {
  color: var(--admin-text-primary);
  background-color: var(--admin-bg);
}

.admin-view-btn--active {
  background-color: var(--admin-accent-light);
  color: var(--admin-accent-text);
  border: 1px solid var(--admin-accent);
}

/* === Shimmer Animation === */
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.shimmer {
  animation: shimmer 1.5s ease-in-out infinite;
}

/* === Toast Animations === */
@keyframes slide-in-from-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-in {
  animation: slide-in-from-right 0.3s ease-out, fade-in 0.3s ease-out;
}