/* ===== SECOS SAWIT - CUSTOM BOOTSTRAP OVERRIDES ===== */

/* Custom variables */
:root {
  --secos-green: #2E7D32;
  --secos-green-light: #4CAF50;
  --secos-green-dark: #1B5E20;
}

/* Font family override */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Hero section styling */
.hero-section {
  background: linear-gradient(135deg, var(--secos-green) 0%, var(--secos-green-light) 100%);
  min-height: 100vh;
  padding-top: 80px; /* Account for fixed navbar */
}

/* Feature cards hover effect */
.feature-card {
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

/* Upload area styling */
.upload-area {
  transition: all 0.3s ease;
  background-color: #f8f9fa;
}

.upload-area:hover {
  background-color: #e8f5e8;
  border-color: var(--secos-green) !important;
}

.upload-area.dragover {
  background-color: rgba(46, 125, 50, 0.1);
  border-color: var(--secos-green) !important;
}

/* Camera button for mobile */
#captureBtn {
  display: none;
}

@media (max-width: 768px) {
  #captureBtn {
    display: inline-flex !important;
  }
  
  .upload-area .d-flex {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .upload-area .btn {
    width: 100%;
    max-width: 200px;
  }
}

/* Custom badge colors for ripeness status */
.badge.matang { background-color: #4CAF50 !important; }
.badge.belum-matang { background-color: #FF9800 !important; }
.badge.terlalu-matang { background-color: #FF5722 !important; }
.badge.busuk { background-color: #F44336 !important; }
.badge.tandan-kosong { background-color: #9E9E9E !important; }
.badge.kurang-matang { background-color: #FFC107 !important; color: #000 !important; }

/* History item styling */
.history-item {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: #fff;
  transition: all 0.2s ease;
}

.history-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-color: var(--secos-green);
}

.history-item .material-icons {
  font-size: 2rem;
  color: var(--secos-green);
}

/* Navbar customization */
.navbar-brand {
  font-size: 1.5rem;
}

.navbar-nav .nav-link {
  font-weight: 500;
  margin: 0 0.5rem;
}

/* Modal customization */
.modal-header {
  background: linear-gradient(135deg, var(--secos-green), var(--secos-green-light));
  color: white;
  border-bottom: none;
}

.modal-header .btn-close {
  filter: invert(1);
}

/* Button hover effects */
.btn {
  transition: all 0.3s ease;
}

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

/* Loading spinner */
.spinner-border-secos {
  width: 3rem;
  height: 3rem;
  border: 0.3em solid rgba(46, 125, 50, 0.25);
  border-right-color: var(--secos-green);
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

/* Alert customization */
.alert {
  border: none;
  border-radius: 10px;
  font-weight: 500;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .hero-section {
    padding-top: 100px;
  }
  
  .hero-section .display-3 {
    font-size: 2.5rem;
  }
  
  .hero-section .lead {
    font-size: 1.1rem;
  }
  
  .feature-card .card-body {
    padding: 1.5rem 1rem;
  }
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  color: white;
}

.loading-overlay .spinner-border {
  width: 4rem;
  height: 4rem;
  border-width: 0.4em;
}

/* Drag and drop styling */
.upload-area[data-dragover="true"] {
  background-color: rgba(46, 125, 50, 0.1) !important;
  border-color: var(--secos-green) !important;
}

/* Success states */
.text-success-custom {
  color: var(--secos-green) !important;
}

.bg-success-custom {
  background-color: var(--secos-green) !important;
}

/* Custom utilities */
.text-white-75 {
  color: rgba(255, 255, 255, 0.75) !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

/* Accessibility improvements */
.btn:focus,
.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.25);
  border-color: var(--secos-green);
}

/* Animation for page load */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}