/* MailVault Design System - Material Design Inspired */

/* ========================================
   DESIGN TOKENS - MATERIAL DESIGN SYSTEM
   ========================================
   These CSS custom properties define the core design language.
   Modify these to evolve the design system.
*/

:root {
  /* ===== COLOR PALETTE ===== */
  /* Primary Colors - Material Blue */
  --mv-primary-50: #e3f2fd;
  --mv-primary-100: #bbdefb;
  --mv-primary-200: #90caf9;
  --mv-primary-300: #64b5f6;
  --mv-primary-400: #42a5f5;
  --mv-primary-500: #2196f3;
  --mv-primary-600: #1e88e5;
  --mv-primary-700: #1976d2;
  --mv-primary-800: #1565c0;
  --mv-primary-900: #0d47a1;

  /* Secondary Colors - Material Green */
  --mv-secondary-50: #e8f5e8;
  --mv-secondary-100: #c8e6c9;
  --mv-secondary-200: #a5d6a7;
  --mv-secondary-300: #81c784;
  --mv-secondary-400: #66bb6a;
  --mv-secondary-500: #4caf50;
  --mv-secondary-600: #43a047;
  --mv-secondary-700: #388e3c;
  --mv-secondary-800: #2e7d32;
  --mv-secondary-900: #1b5e20;

  /* Error Colors - Material Red */
  --mv-error-50: #ffebee;
  --mv-error-100: #ffcdd2;
  --mv-error-200: #ef9a9a;
  --mv-error-300: #e57373;
  --mv-error-400: #ef5350;
  --mv-error-500: #f44336;
  --mv-error-600: #e53935;
  --mv-error-700: #d32f2f;
  --mv-error-800: #c62828;
  --mv-error-900: #b71c1c;

  /* Warning Colors - Material Orange */
  --mv-warning-50: #fff3e0;
  --mv-warning-100: #ffe0b2;
  --mv-warning-200: #ffcc80;
  --mv-warning-300: #ffb74d;
  --mv-warning-400: #ffa726;
  --mv-warning-500: #ff9800;
  --mv-warning-600: #fb8c00;
  --mv-warning-700: #f57c00;
  --mv-warning-800: #ef6c00;
  --mv-warning-900: #e65100;

  /* Success Colors - Secondary Green */
  --mv-success-50: var(--mv-secondary-50);
  --mv-success-100: var(--mv-secondary-100);
  --mv-success-200: var(--mv-secondary-200);
  --mv-success-300: var(--mv-secondary-300);
  --mv-success-400: var(--mv-secondary-400);
  --mv-success-500: var(--mv-secondary-500);
  --mv-success-600: var(--mv-secondary-600);
  --mv-success-700: var(--mv-secondary-700);
  --mv-success-800: var(--mv-secondary-800);
  --mv-success-900: var(--mv-secondary-900);

  /* Neutral Colors - Material Grey */
  --mv-grey-50: #fafafa;
  --mv-grey-100: #f5f5f5;
  --mv-grey-200: #eeeeee;
  --mv-grey-300: #e0e0e0;
  --mv-grey-400: #bdbdbd;
  --mv-grey-500: #9e9e9e;
  --mv-grey-600: #757575;
  --mv-grey-700: #616161;
  --mv-grey-800: #424242;
  --mv-grey-900: #212121;

  /* Surface Colors */
  --mv-surface: #ffffff;
  --mv-surface-variant: var(--mv-grey-50);
  --mv-surface-container: var(--mv-grey-100);
  --mv-surface-container-high: var(--mv-grey-200);

  /* Text Colors */
  --mv-on-surface: var(--mv-grey-900);
  --mv-on-surface-variant: var(--mv-grey-700);
  --mv-on-primary: #ffffff;
  --mv-on-secondary: #ffffff;
  --mv-on-error: #ffffff;
  --mv-on-warning: #ffffff;
  --mv-on-success: #ffffff;

  /* ===== TYPOGRAPHY ===== */
  /* Material Design Typography Scale */
  --mv-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mv-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Type Scale */
  --mv-text-display-large: 400 57px/64px var(--mv-font-family);
  --mv-text-display-medium: 400 45px/52px var(--mv-font-family);
  --mv-text-display-small: 400 36px/44px var(--mv-font-family);
  --mv-text-headline-large: 400 32px/40px var(--mv-font-family);
  --mv-text-headline-medium: 400 28px/36px var(--mv-font-family);
  --mv-text-headline-small: 400 24px/32px var(--mv-font-family);
  --mv-text-title-large: 500 22px/28px var(--mv-font-family);
  --mv-text-title-medium: 500 16px/24px var(--mv-font-family);
  --mv-text-title-small: 500 14px/20px var(--mv-font-family);
  --mv-text-body-large: 400 16px/24px var(--mv-font-family);
  --mv-text-body-medium: 400 14px/20px var(--mv-font-family);
  --mv-text-body-small: 400 12px/16px var(--mv-font-family);
  --mv-text-label-large: 500 14px/20px var(--mv-font-family);
  --mv-text-label-medium: 500 12px/16px var(--mv-font-family);
  --mv-text-label-small: 500 11px/16px var(--mv-font-family);

  /* ===== SPACING ===== */
  /* Material Design Spacing Scale (8px base unit) */
  --mv-space-1: 4px;   /* 0.5 unit */
  --mv-space-2: 8px;   /* 1 unit */
  --mv-space-3: 12px;  /* 1.5 units */
  --mv-space-4: 16px;  /* 2 units */
  --mv-space-5: 20px;  /* 2.5 units */
  --mv-space-6: 24px;  /* 3 units */
  --mv-space-8: 32px;  /* 4 units */
  --mv-space-10: 40px; /* 5 units */
  --mv-space-12: 48px; /* 6 units */
  --mv-space-16: 64px; /* 8 units */
  --mv-space-20: 80px; /* 10 units */
  --mv-space-24: 96px; /* 12 units */

  /* ===== ELEVATION (SHADOWS) ===== */
  /* Material Design Elevation System */
  --mv-elevation-0: none;
  --mv-elevation-1: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
  --mv-elevation-2: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  --mv-elevation-3: 0px 6px 20px rgba(0, 0, 0, 0.15), 0px 6px 6px rgba(0, 0, 0, 0.10);
  --mv-elevation-4: 0px 8px 28px rgba(0, 0, 0, 0.15), 0px 8px 10px rgba(0, 0, 0, 0.10);
  --mv-elevation-5: 0px 16px 32px rgba(0, 0, 0, 0.15), 0px 16px 16px rgba(0, 0, 0, 0.10);

  /* ===== BORDER RADIUS ===== */
  /* Material Design Shape System */
  --mv-radius-none: 0px;
  --mv-radius-xs: 4px;
  --mv-radius-sm: 8px;
  --mv-radius-md: 12px;
  --mv-radius-lg: 16px;
  --mv-radius-xl: 20px;
  --mv-radius-2xl: 24px;
  --mv-radius-full: 9999px;

  /* ===== TRANSITIONS ===== */
  /* Material Design Motion System */
  --mv-duration-short1: 75ms;
  --mv-duration-short2: 150ms;
  --mv-duration-medium1: 200ms;
  --mv-duration-medium2: 250ms;
  --mv-duration-long1: 300ms;
  --mv-duration-long2: 350ms;
  --mv-duration-long3: 400ms;
  --mv-duration-long4: 500ms;

  --mv-easing-linear: cubic-bezier(0, 0, 1, 1);
  --mv-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mv-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --mv-easing-decelerated: cubic-bezier(0, 0, 0.2, 1);
  --mv-easing-accelerated: cubic-bezier(0.4, 0, 1, 1);
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  :root {
    --mv-surface: var(--mv-grey-900);
    --mv-surface-variant: var(--mv-grey-800);
    --mv-surface-container: var(--mv-grey-800);
    --mv-surface-container-high: var(--mv-grey-700);
    --mv-on-surface: var(--mv-grey-100);
    --mv-on-surface-variant: var(--mv-grey-300);
  }
}

/* ========================================
   MATERIAL DESIGN COMPONENT SYSTEM
   ========================================
   These utility classes implement Material Design patterns
   using the design tokens above.
*/

/* Base font setup */
body {
  font-family: var(--mv-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Material motion - smooth transitions */
* {
  transition: all var(--mv-duration-short2) var(--mv-easing-standard);
}

/* ===== MATERIAL BUTTONS ===== */
.mv-btn {
  @apply inline-flex items-center justify-center font-medium transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
  border-radius: var(--mv-radius-lg);
  font: var(--mv-text-label-large);
}

/* Filled Button (Primary) */
.mv-btn-filled {
  @apply mv-btn px-6 py-3;
  background-color: var(--mv-primary-600);
  color: var(--mv-on-primary);
  box-shadow: var(--mv-elevation-1);
}
.mv-btn-filled:hover {
  background-color: var(--mv-primary-700);
  box-shadow: var(--mv-elevation-2);
}
.mv-btn-filled:active {
  background-color: var(--mv-primary-800);
  box-shadow: var(--mv-elevation-1);
}
.mv-btn-filled:focus {
  @apply ring-blue-500;
}

/* Outlined Button */
.mv-btn-outlined {
  @apply mv-btn px-6 py-3 border-2;
  background-color: transparent;
  border-color: var(--mv-primary-600);
  color: var(--mv-primary-600);
}
.mv-btn-outlined:hover {
  background-color: var(--mv-primary-50);
  border-color: var(--mv-primary-700);
  color: var(--mv-primary-700);
}
.mv-btn-outlined:focus {
  @apply ring-blue-500;
}

/* Text Button */
.mv-btn-text {
  @apply mv-btn px-4 py-2;
  background-color: transparent;
  color: var(--mv-primary-600);
}
.mv-btn-text:hover {
  background-color: var(--mv-primary-50);
}
.mv-btn-text:focus {
  @apply ring-blue-500;
}

/* Icon Button */
.mv-btn-icon {
  @apply mv-btn p-2 rounded-full;
  color: var(--mv-on-surface-variant);
}
.mv-btn-icon:hover {
  background-color: var(--mv-surface-container);
}

/* Button sizes */
.mv-btn-sm {
  @apply px-4 py-2;
  font: var(--mv-text-label-medium);
}
.mv-btn-lg {
  @apply px-8 py-4;
  font: var(--mv-text-label-large);
}

/* ===== MATERIAL CARDS ===== */
.mv-card {
  @apply rounded-xl;
  background-color: var(--mv-surface);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-elevation-1);
  transition: box-shadow var(--mv-duration-medium1) var(--mv-easing-standard);
}

.mv-card-elevated {
  box-shadow: var(--mv-elevation-3);
}

.mv-card:hover {
  box-shadow: var(--mv-elevation-2);
}

.mv-card-outlined {
  @apply border;
  border-color: var(--mv-grey-300);
  box-shadow: none;
}

/* ===== MATERIAL FORM INPUTS ===== */
.mv-input {
  @apply w-full px-4 py-3 border rounded-lg;
  @apply focus:outline-none focus:ring-2 focus:border-transparent;
  background-color: var(--mv-surface);
  border-color: var(--mv-grey-300);
  color: var(--mv-on-surface);
  font: var(--mv-text-body-large);
  border-radius: var(--mv-radius-md);
}

.mv-input:focus {
  border-color: var(--mv-primary-600);
  @apply ring-blue-500/20;
}

.mv-input:disabled {
  background-color: var(--mv-surface-variant);
  color: var(--mv-on-surface-variant);
  cursor: not-allowed;
}

.mv-input-error {
  border-color: var(--mv-error-600);
}

.mv-input-error:focus {
  border-color: var(--mv-error-600);
  @apply ring-red-500/20;
}

/* Input Labels */
.mv-label {
  @apply block mb-2;
  color: var(--mv-on-surface);
  font: var(--mv-text-label-large);
}

.mv-label-required::after {
  content: ' *';
  color: var(--mv-error-600);
}

/* Helper Text */
.mv-helper-text {
  @apply mt-1;
  color: var(--mv-on-surface-variant);
  font: var(--mv-text-body-small);
}

.mv-error-text {
  color: var(--mv-error-600);
  font: var(--mv-text-body-small);
}

/* ===== MATERIAL BADGES ===== */
.mv-badge {
  @apply inline-flex items-center px-3 py-1 text-sm font-medium rounded-full;
  font: var(--mv-text-label-medium);
  border-radius: var(--mv-radius-full);
}

.mv-badge-primary {
  background-color: var(--mv-primary-100);
  color: var(--mv-primary-800);
}

.mv-badge-success {
  background-color: var(--mv-success-100);
  color: var(--mv-success-800);
}

.mv-badge-warning {
  background-color: var(--mv-warning-100);
  color: var(--mv-warning-800);
}

.mv-badge-error {
  background-color: var(--mv-error-100);
  color: var(--mv-error-800);
}

.mv-badge-neutral {
  background-color: var(--mv-grey-100);
  color: var(--mv-grey-800);
}

/* ===== MATERIAL NAVIGATION ===== */
.mv-nav-item {
  @apply flex items-center px-4 py-3 rounded-lg transition-colors;
  color: var(--mv-on-surface-variant);
  font: var(--mv-text-body-large);
  border-radius: var(--mv-radius-lg);
}

.mv-nav-item:hover {
  background-color: var(--mv-surface-container);
  color: var(--mv-on-surface);
}

.mv-nav-item-active {
  background-color: var(--mv-primary-100);
  color: var(--mv-primary-700);
}

/* ===== MATERIAL TYPOGRAPHY UTILITIES ===== */
.mv-display-large { font: var(--mv-text-display-large); }
.mv-display-medium { font: var(--mv-text-display-medium); }
.mv-display-small { font: var(--mv-text-display-small); }
.mv-headline-large { font: var(--mv-text-headline-large); }
.mv-headline-medium { font: var(--mv-text-headline-medium); }
.mv-headline-small { font: var(--mv-text-headline-small); }
.mv-title-large { font: var(--mv-text-title-large); }
.mv-title-medium { font: var(--mv-text-title-medium); }
.mv-title-small { font: var(--mv-text-title-small); }
.mv-body-large { font: var(--mv-text-body-large); }
.mv-body-medium { font: var(--mv-text-body-medium); }
.mv-body-small { font: var(--mv-text-body-small); }
.mv-label-large { font: var(--mv-text-label-large); }
.mv-label-medium { font: var(--mv-text-label-medium); }
.mv-label-small { font: var(--mv-text-label-small); }

/* ===== MATERIAL ELEVATION UTILITIES ===== */
.mv-elevation-0 { box-shadow: var(--mv-elevation-0); }
.mv-elevation-1 { box-shadow: var(--mv-elevation-1); }
.mv-elevation-2 { box-shadow: var(--mv-elevation-2); }
.mv-elevation-3 { box-shadow: var(--mv-elevation-3); }
.mv-elevation-4 { box-shadow: var(--mv-elevation-4); }
.mv-elevation-5 { box-shadow: var(--mv-elevation-5); }

/* ===== MATERIAL SURFACE UTILITIES ===== */
.mv-surface { background-color: var(--mv-surface); }
.mv-surface-variant { background-color: var(--mv-surface-variant); }
.mv-surface-container { background-color: var(--mv-surface-container); }
.mv-surface-container-high { background-color: var(--mv-surface-container-high); }

/* Text color utilities */
.mv-on-surface { color: var(--mv-on-surface); }
.mv-on-surface-variant { color: var(--mv-on-surface-variant); }
.mv-primary { color: var(--mv-primary-600); }
.mv-secondary { color: var(--mv-secondary-600); }
.mv-error { color: var(--mv-error-600); }
.mv-warning { color: var(--mv-warning-600); }
.mv-success { color: var(--mv-success-600); }

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

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

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

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Form focus styles */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* HTMX loading styles */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator {
  opacity: 1;
}
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Animation utilities */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* ===== LEGACY BUTTON SUPPORT ===== */
/* Keep existing buttons working while transitioning to Material Design */
.btn-primary {
  @apply mv-btn-filled;
}

.btn-secondary {
  @apply mv-btn-outlined;
  background-color: var(--mv-surface);
  border-color: var(--mv-grey-400);
  color: var(--mv-on-surface);
}

.btn-secondary:hover {
  background-color: var(--mv-surface-container);
  border-color: var(--mv-grey-500);
}

/* ===== LEGACY CARD SUPPORT ===== */
.card-hover {
  @apply mv-card;
}

/* ===== LEGACY STATUS BADGES ===== */
.status-verified {
  @apply mv-badge mv-badge-success;
}

.status-pending {
  @apply mv-badge mv-badge-warning;
}

.status-error {
  @apply mv-badge mv-badge-error;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .sidebar-mobile {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }
  
  .sidebar-mobile.open {
    transform: translateX(0);
  }
}

/* Loading spinner */
.loading-spinner {
  border: 2px solid #f3f4f6;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}