/* Custom CSS for DWCRA Loan Management App */
/* Optimized for women aged 25-40 with minimal education and basic tech knowledge */

/* Base Styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* Large, touch-friendly buttons */
.btn {
  @apply px-6 py-4 rounded-lg font-semibold text-lg transition-all duration-200 shadow-md;
  min-height: 48px;
  min-width: 120px;
}

.btn-primary {
  @apply bg-primary text-white hover:bg-blue-700 active:bg-blue-800;
  box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.39);
}

.btn-secondary {
  @apply bg-secondary text-white hover:bg-green-700 active:bg-green-800;
  box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.39);
}

.btn-accent {
  @apply bg-accent text-white hover:bg-yellow-600 active:bg-yellow-700;
  box-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.39);
}

.btn-danger {
  @apply bg-danger text-white hover:bg-red-600 active:bg-red-700;
  box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.39);
}

.btn-outline {
  @apply border-2 border-primary text-primary bg-white hover:bg-primary hover:text-white;
}

/* Large input fields */
.input-field {
  @apply w-full px-4 py-4 text-lg border-2 border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-50;
  min-height: 56px;
}

.input-field:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

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

.card-header {
  @apply flex items-center justify-between mb-4 pb-4 border-b border-gray-200;
}

.card-title {
  @apply text-xl font-bold text-gray-800;
}

.card-body {
  @apply space-y-4;
}

/* Navigation styles */
.nav-tab {
  @apply flex flex-col items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200;
  min-width: 80px;
}

.nav-tab:not(.active) {
  @apply text-gray-600 hover:text-primary hover:bg-gray-50;
}

.nav-tab.active {
  @apply text-primary bg-blue-50 shadow-sm;
}

.nav-tab i {
  @apply text-lg mb-1;
}

.nav-tab span {
  @apply text-xs;
}

/* Bottom navigation for mobile */
.bottom-nav-btn {
  @apply flex flex-col items-center py-2 px-1 text-xs font-medium transition-all duration-200;
}

.bottom-nav-btn:not(.active) {
  @apply text-gray-500;
}

.bottom-nav-btn.active {
  @apply text-primary;
}

.bottom-nav-btn i {
  @apply text-lg mb-1;
}

/* Status indicators with color coding */
.status-current {
  @apply bg-green-100 text-green-800 border border-green-300;
}

.status-overdue {
  @apply bg-red-100 text-red-800 border border-red-300;
}

.status-completed {
  @apply bg-blue-100 text-blue-800 border border-blue-300;
}

.status-badge {
  @apply px-3 py-1 rounded-full text-sm font-semibold;
}

/* Member cards */
.member-card {
  @apply card hover:shadow-xl transition-shadow duration-200 cursor-pointer;
}

.member-card:hover {
  transform: translateY(-1px);
}

.member-avatar {
  @apply w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center text-2xl font-bold text-gray-600;
}

.member-avatar img {
  @apply w-full h-full rounded-full object-cover;
}

/* Amount displays */
.amount-display {
  @apply font-mono text-2xl font-bold;
}

.amount-positive {
  @apply text-secondary;
}

.amount-negative {
  @apply text-danger;
}

.amount-neutral {
  @apply text-gray-600;
}

/* Progress bars */
.progress-bar {
  @apply w-full bg-gray-200 rounded-full h-4;
}

.progress-fill {
  @apply h-full rounded-full transition-all duration-300;
}

.progress-success {
  @apply bg-secondary;
}

.progress-warning {
  @apply bg-accent;
}

.progress-danger {
  @apply bg-danger;
}

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

.modal-content {
  @apply bg-white rounded-xl shadow-2xl max-w-md w-full max-h-90vh overflow-y-auto;
}

.modal-header {
  @apply px-6 py-4 border-b border-gray-200 flex items-center justify-between;
}

.modal-title {
  @apply text-xl font-bold text-gray-800;
}

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

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

/* Form styles */
.form-group {
  @apply space-y-2;
}

.form-label {
  @apply block text-sm font-semibold text-gray-700;
}

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

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

/* Payment input styles */
.payment-input {
  @apply input-field text-center text-2xl font-bold;
}

.payment-suggestions {
  @apply flex flex-wrap gap-2 mt-2;
}

.payment-suggestion {
  @apply bg-gray-100 text-gray-700 px-3 py-2 rounded-lg text-sm cursor-pointer hover:bg-gray-200 transition-colors;
}

/* Meeting attendance styles */
.attendance-grid {
  @apply grid grid-cols-2 md:grid-cols-3 gap-3;
}

.attendance-card {
  @apply p-4 border-2 rounded-lg cursor-pointer transition-all duration-200;
}

.attendance-card:not(.selected) {
  @apply border-gray-300 hover:border-primary;
}

.attendance-card.selected {
  @apply border-primary bg-blue-50;
}

.attendance-card.present {
  @apply border-secondary bg-green-50;
}

.attendance-card.absent {
  @apply border-gray-400 bg-gray-50 opacity-60;
}

/* Video guide styles */
.video-guide-btn {
  @apply bg-purple-100 text-purple-800 p-2 rounded-full hover:bg-purple-200 transition-colors;
}

.video-guide-modal {
  @apply max-w-4xl;
}

/* Responsive design helpers */
@media (max-width: 768px) {
  .btn {
    @apply px-4 py-3 text-base;
    min-height: 44px;
  }
  
  .input-field {
    @apply px-3 py-3 text-base;
    min-height: 48px;
  }
  
  .card {
    @apply p-4;
  }
  
  .amount-display {
    @apply text-xl;
  }
}

/* Loading states */
.loading {
  @apply animate-pulse;
}

.loading-skeleton {
  @apply bg-gray-200 rounded;
}

.spinner {
  @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary;
}

/* Animations */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

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

/* Accessibility improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus styles for keyboard navigation */
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #4F46E5;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid currentColor;
  }
  
  .card {
    border: 2px solid #000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }
}

/* Voice recording indicator */
.voice-recording {
  @apply fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-red-500 text-white p-8 rounded-full z-50;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Offline indicator styles */
#offline-banner {
  animation: slideInUp 0.3s ease-out;
}

/* Floating action button */
#fab {
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

#fab:hover {
  box-shadow: 0 12px 35px rgba(245, 158, 11, 0.5);
}