/* Responsive Design CSS for Tree Planting Information System
   This file contains mobile-friendly styles for all pages */

/* Base mobile-friendly styles */
:root {
   --primary-color: #357a35;
   --secondary-color: #4CAF50;
   --text-color: #2c5530;
   --background-color: #f5f5f5;
   --card-bg-color: rgba(255, 255, 255, 0.92);
}

/* Ensure proper viewport behavior */
@viewport {
   width: device-width;
   zoom: 1.0;
}

/* Global responsive adjustments */
* {
   box-sizing: border-box;
}

html, body {
   overflow-x: hidden;
   width: 100%;
   -webkit-text-size-adjust: 100%;
}

/* Common responsive typography */
@media (max-width: 768px) {
   body {
      font-size: 14px;
   }
   
   h1 {
      font-size: 1.8rem !important;
   }
   
   h2 {
      font-size: 1.5rem !important;
   }
   
   h3 {
      font-size: 1.3rem !important;
   }
}

@media (max-width: 480px) {
   body {
      font-size: 13px;
   }
   
   h1 {
      font-size: 1.5rem !important;
   }
   
   h2 {
      font-size: 1.3rem !important;
   }
   
   h3 {
      font-size: 1.1rem !important;
   }
}

/* Responsive header and navigation */
@media (max-width: 768px) {
   header .container {
      padding: 5px;
   }
   
   header h1 {
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   
   .header-logo {
      width: 30px;
      height: auto;
      margin-right: 8px;
   }
}

/* Responsive forms */
@media (max-width: 768px) {
   input[type="text"],
   input[type="password"],
   input[type="email"],
   input[type="file"],
   input[type="submit"],
   select,
   textarea {
      font-size: 16px !important; /* Prevents zoom on iOS */
      padding: 10px !important;
   }
   
   .container {
      padding: 15px !important;
      margin: 10px auto !important;
   }
   
   form {
      gap: 10px !important;
   }
}

/* Responsive tree list grid */
@media (max-width: 992px) {
   .row {
      gap: 15px;
   }
   
   .col-md-4 {
      width: calc(50% - 15px);
   }
}

@media (max-width: 768px) {
   .tree-list {
      padding: 20px 10px;
   }
   
   .col-md-4 {
      width: 100%;
   }
   
   .tree-item img {
      min-height: 150px;
      max-height: 200px;
   }
}

/* Responsive map page */
@media (max-width: 768px) {
   .info-section {
      width: 85%;
      max-width: 300px;
      top: 10px;
      right: 10px;
      transform: translateX(100%);
      max-height: calc(100% - 20px);
   }
   
   .toggle-info {
      top: 10px;
      /* No explicit right positioning - let JavaScript handle it */
   }
   
   .toggle-info.active {
      /* No explicit right positioning - let JavaScript handle it */
   }
   
   .search-container {
      flex-direction: column;
      padding: 10px;
   }
   
   .search-row {
      flex-direction: column;
   }
   
   #yearFilter, #treeFilter, #searchBox {
      width: 100%;
      margin-bottom: 10px;
   }
   
   .search-controls {
      display: flex;
      justify-content: space-between;
   }
   
   .location-card {
      padding: 10px;
   }
   
   .info-item {
      grid-template-columns: 1fr;
   }
   
   .map-controls-left,
   .map-type-control,
   .reset-view-button,
   .print-button {
      margin: 5px;
   }
}

/* Responsive login/registration pages */
@media (max-width: 768px) {
   /* Login Page Container */
   .mobile-form-container {
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
      margin-top: 20px;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
   }
   
   .mobile-form-container.active {
      display: block;
      animation: fadeIn 0.5s;
   }
   
   .mobile-form-container h2 {
      margin-bottom: 20px;
      color: var(--primary-color);
   }
   
   .mobile-form-container .form-group {
      margin-bottom: 15px;
   }
   
   .mobile-form-container .form-control {
      height: 45px;
      border-radius: 4px;
      font-size: 16px;
   }
   
   .mobile-form-container .btn {
      height: 45px;
      font-size: 16px;
      font-weight: 500;
   }
   
   .mobile-form-container .text-danger {
      font-size: 12px;
      margin-top: 5px;
      display: block;
   }
   
   /* Hide desktop forms on mobile */
   .d-none {
      display: none !important;
   }
   
   .d-md-flex {
      display: none !important;
   }
   
   .d-block {
      display: block !important;
   }
   
   /* Footer */
   .footer {
      padding: 15px;
      position: relative;
      margin-top: 40px;
   }
   
   /* Animation for form transition */
   @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
   }
}

/* Special fixes for very small mobile screens */
@media (max-width: 480px) {
   .col-6 {
      padding: 5px;
   }
   
   .p-3 {
      padding: 10px !important;
   }
   
   .mobile-form-container {
      padding: 15px;
   }
   
   .btn {
      font-size: 14px !important;
      padding: 8px 15px !important;
   }
   
   .h5 {
      font-size: 14px !important;
      margin-bottom: 8px !important;
   }
}

/* Responsive modals and dialogs */
@media (max-width: 768px) {
   .tree-modal {
      width: 95%;
      padding: 15px;
      max-height: 95vh;
   }
   
   .modal-image {
      max-height: 200px;
   }
   
   .modal-content h2 {
      font-size: 1.3rem;
   }
}

/* Responsive about and contact pages */
@media (max-width: 768px) {
   #about-section, 
   #contact-section {
      padding: 30px 15px;
      margin-top: 70px;
   }
   
   #about-section p, 
   #contact-section p {
      font-size: 0.9rem;
   }
   
   .cta-button {
      padding: 10px 25px;
      font-size: 0.9rem;
   }
}

/* Responsive user account page */
@media (max-width: 768px) {
   .user-account {
      flex-direction: column;
      padding: 15px;
   }
   
   .profile-img {
      width: 80px;
      height: 80px;
      margin: 0 auto 15px;
   }
   
   .user-info {
      width: 100%;
      padding: 0;
   }
}

/* Responsive feedback and report dashboards */
@media (max-width: 768px) {
   .dashboard-card {
      padding: 10px;
   }
   
   .dashboard-table {
      font-size: 0.8rem;
   }
   
   .dashboard-table th, 
   .dashboard-table td {
      padding: 5px;
   }
}

/* Additional helper classes for responsive design */
.hide-on-mobile {
   display: block;
}

.show-on-mobile {
   display: none !important;
}

/* Mobile navigation toggle button - hidden by default */
@media (min-width: 769px) {
   .mobile-nav-toggle {
      display: none !important;
   }
   
   /* Mobile navigation container - hidden by default */
   .nav-container {
      display: none !important;
   }
   
   /* Mobile navigation overlay - hidden by default */
   .nav-overlay {
      display: none !important;
   }
}

@media (max-width: 768px) {
   .hide-on-mobile {
      display: none !important;
   }
   
   .show-on-mobile {
      display: block !important;
   }
   
   /* OLD NAV-CONTAINER CODE DISABLED - causes duplicate menus */
}

/* Responsive tables */
@media (max-width: 768px) {
   table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
   }
   
   /* Alternative for responsive tables */
   .responsive-table {
      border: 0;
   }
   
   .responsive-table caption {
      font-size: 1.3em;
   }
   
   .responsive-table thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
   }
   
   .responsive-table tr {
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: .625em;
   }
   
   .responsive-table td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right;
      padding: 10px;
   }
   
   .responsive-table td::before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
   }
   
   .responsive-table td:last-child {
      border-bottom: 0;
   }
}