mobile responsive version

style.css

@@ -133,6 +133,9 @@ body {
   font-family: inherit;
   transition: all 0.2s;
   background: #fafafa;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 
 .form-group input:focus {
@@ -412,20 +415,226 @@ body {
   }
 }
 
-@media (max-width: 640px) {
-  .hero-content h1 {
-    font-size: 1.8rem;
+@media (max-width: 768px) {
+  .hero {
+    padding: 40px 15px;
   }
   
-  .form-row-2 {
-    grid-template-columns: 1fr;
+  .hero-content h1 {
+    font-size: 1.6rem;
+  }
+  
+  .hero-content p {
+    font-size: 1rem;
+  }
+  
+  .container {
+    padding: 15px;
+  }
+  
+  .grid {
+    gap: 15px;
+  }
+  
+  .card-header {
+    padding: 15px 18px;
+  }
+  
+  .vacation-form {
+    padding: 18px;
+    gap: 14px;
+  }
+  
+  .form-group input {
+    padding: 11px 12px;
+    font-size: 16px;
+  }
+  
+  .btn-primary {
+    padding: 13px 20px;
+    font-size: 1rem;
+  }
+  
+  .stats-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    padding: 18px;
+  }
+  
+  .stat-value {
+    font-size: 1.5rem;
   }
   
   .cards-grid {
     grid-template-columns: 1fr;
+    padding: 18px;
+    gap: 15px;
+  }
+  
+  .main-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .btn-export {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero {
+    padding: 30px 12px;
+  }
+  
+  .hero-content h1 {
+    font-size: 1.4rem;
+  }
+  
+  .hero-content p {
+    font-size: 0.9rem;
+  }
+  
+  .container {
+    padding: 10px;
+  }
+  
+  .card {
+    border-radius: 12px;
+  }
+  
+  .card-header {
+    padding: 14px 15px;
+  }
+  
+  .card-header h2 {
+    font-size: 1rem;
+  }
+  
+  .vacation-form {
+    padding: 15px;
+    gap: 12px;
+  }
+  
+  .form-group {
+    gap: 6px;
+  }
+  
+  .form-group label {
+    font-size: 0.8rem;
+  }
+  
+  .form-group input {
+    padding: 10px 11px;
+    font-size: 16px;
+    border-radius: 8px;
+  }
+  
+  .form-row-2 {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+  
+  .btn-primary {
+    padding: 12px 18px;
+    font-size: 0.95rem;
+    border-radius: 8px;
   }
   
   .stats-grid {
     grid-template-columns: 1fr;
+    gap: 10px;
+    padding: 15px;
+  }
+  
+  .stat-item {
+    padding: 12px;
+  }
+  
+  .stat-value {
+    font-size: 1.3rem;
+  }
+  
+  .stat-label {
+    font-size: 0.75rem;
+  }
+  
+  .cards-grid {
+    padding: 15px;
+    gap: 12px;
+  }
+  
+  .vacation-card {
+    padding: 16px;
+    border-radius: 10px;
+  }
+  
+  .vacation-card::before {
+    height: 3px;
+  }
+  
+  .flag-icon {
+    width: 45px;
+    height: 45px;
+    font-size: 1.6rem;
+  }
+  
+  .location-info h3 {
+    font-size: 1rem;
+  }
+  
+  .location-info p {
+    font-size: 0.85rem;
+  }
+  
+  .card-details {
+    gap: 8px;
+  }
+  
+  .detail-row {
+    font-size: 0.85rem;
+  }
+  
+  .detail-row .d-icon {
+    font-size: 1rem;
+  }
+  
+  .card-budget {
+    padding: 10px 12px;
+    border-radius: 8px;
+  }
+  
+  .budget-label {
+    font-size: 0.8rem;
+  }
+  
+  .budget-value {
+    font-size: 1.2rem;
+  }
+  
+  .card-actions {
+    gap: 6px;
+  }
+  
+  .btn-delete {
+    padding: 9px 14px;
+    font-size: 0.85rem;
+    border-radius: 7px;
+  }
+  
+  .empty-state {
+    padding: 50px 15px;
+  }
+  
+  .empty-icon {
+    font-size: 3rem;
+  }
+  
+  .empty-state h3 {
+    font-size: 1.1rem;
+  }
+  
+  .empty-state p {
+    font-size: 0.9rem;
   }
 }