img, video, canvas, svg { max-width: 100%; height: auto; }
iframe { max-width: 100%; border: none; }

.responsive-embed { position: relative; width: 100%; padding-top: 56.25%; }
.responsive-embed iframe, .responsive-embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .table { min-width: 600px; }

.navbar-brand img.brand-logo { max-height: 32px; height: auto; }

.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Global Fluid Typography */
html { font-size: 16px; }
@media (max-width: 575.98px) {
  html { font-size: 15px; }
}

/* Touch-friendly inputs and buttons */
input[type="text"], input[type="email"], input[type="password"], select, textarea, .form-control, .form-select { 
    font-size: 16px !important; /* Prevent zoom on iOS */
    min-height: 44px;
}
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-sm {
    min-height: 32px;
}

/* Mobile Layout Improvements */
@media (max-width: 575.98px) {
  .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
  
  /* Hero Section */
  .hero-section { padding: 3rem 0; }
  .hero-section h1 { font-size: 1.75rem; }
  .hero-section p { font-size: 1rem; }
  
  /* Buttons */
  .btn { font-size: 1rem; padding: 0.5rem 1rem; width: 100%; margin-bottom: 0.5rem; }
  .btn-sm { width: auto; margin-bottom: 0; }
  
  /* Cards */
  .card { 
      border-radius: 0.75rem; 
      margin-bottom: 1rem; 
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
      border: none;
  }
  .card-header {
      background-color: transparent;
      padding: 1rem;
      border-bottom: 1px solid #f0f0f0;
  }
  .card-body {
      padding: 1rem;
  }
  
  /* Tables */
  .table td, .table th { word-break: break-word; white-space: normal; }
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 0;
  }
  
  /* Navbar adjustments */
  .brand-logo { height: 28px; }
  .navbar .dropdown-menu { max-width: 90vw; }
}

/* Sidebar and Topbar Mobile Improvements */
@media (max-width: 767.98px) {
  /* Sticky Topbar for Dashboard */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  }
  
  /* Ensure sidebar is off-canvas */
  .sidebar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100vh; 
    width: 260px !important;
    transform: translateX(-100%); 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    z-index: 1040; 
  }
  .sidebar.toggled {
      transform: translateX(0) !important; /* Override default toggled behavior which might be different */
  }
  
  /* Backdrop for sidebar */
  .sidebar-backdrop {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1030;
      backdrop-filter: blur(2px);
      animation: fadeIn 0.3s;
  }
  
  /* Prevent body scroll when sidebar is open */
  body.sidebar-overlay-active { overflow: hidden; }
  
  /* Search bar in topbar */
  .topbar .navbar-search { width: 100%; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 991.98px) {
  .hero-section { padding: 3.5rem 0; }
  .hero-section h1 { font-size: 2rem; }
  .hero-section p { font-size: 1.1rem; }
}