/* Responsive design improvements for DIMA Portal
   Maintains all existing functionality while improving mobile UI
*/

/* Base responsive adjustments */
@media (max-width: 768px) {
  body {
    padding-bottom: 30px;
  }
  
  /* Header styles removed as the header has been removed from the profile page */
  
  nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .auth-buttons {
    flex-direction: row;
    gap: 0.5rem;
  }

  .auth-buttons .btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  main {
    padding: 0.5rem;
  }

  /* For profile page, adjust top padding now that header is gone */
  .profile-page main {
    padding-top: 1rem;
  }

  .hero h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero p {
    font-size: 1rem;
  }

  .features {
    grid-template-columns: 1fr;
  }
}

/* Mobile styles for the profile page */
@media (max-width: 768px) {
  .profile-container {
    padding: 0.5rem;
  }

  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .profile-image {
    margin-bottom: 1rem;
    margin-right: 0;
  }

  .profile-info {
    width: 100%;
  }

  .profile-info h1 {
    font-size: 1.5rem;
  }

  .social-icons {
    justify-content: center;
    margin-top: 0.5rem;
  }

  .links-container {
    gap: 1rem;
    padding: 0;
  }

  .link-card {
    padding: 0.75rem;
  }

  .link-card.thumbnail-style {
    flex-direction: column;
  }

  .link-thumbnail, 
  .link-thumbnail-placeholder {
    width: 100%;
    max-width: none;
    aspect-ratio: 16/9;
    height: auto;
  }
}

/* Fix for link builder/editor and form elements */
@media (max-width: 768px) {
  .link-builder-container {
    flex-direction: column;
  }

  .editor-section {
    width: 100%;
    padding: 1rem;
  }

  .preview-section {
    width: 100%;
    position: static;
    padding: 1rem;
    margin-top: 2rem;
  }

  .phone-mockup {
    transform: none;
    margin: 0 auto;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .link-item {
    flex-direction: column;
  }

  .link-item .link-content {
    flex-direction: row;
    width: 100%;
  }

  .link-item .link-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0.5rem;
  }

  .inline-edit-form form {
    grid-template-columns: 1fr;
  }
}

/* Settings page mobile fixes */
@media (max-width: 768px) {
  .settings-container {
    padding: 1rem;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .profile-section, 
  .url-section {
    padding: 1rem;
  }

  .url-input-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .url-prefix {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 0.5rem;
  }

  .url-input-group input {
    width: 100%;
    border-radius: 6px;
  }

  /* Color picker container fixes */
  .color-picker-container {
    flex-wrap: wrap;
  }

  .color-picker-container input[type="color"] {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .color-picker-container .btn.small {
    width: 100%;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .profile-settings-section form {
    gap: 0.8rem;
  }

  .profile-image-container img.profile-preview {
    margin: 0 auto 10px;
    display: block;
  }

  /* Fix for social icons grid */
  .social-links-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Fix for admin panel on mobile */
  .admin-container {
    padding: 1rem;
  }

  .admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .user-list-header,
  .user-list-item {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 10px;
  }

  .user-list-header {
    display: none; /* Hide headers on mobile */
  }

  .user-list-item > div {
    padding: 5px 0;
  }

  .user-list-item .user-actions {
    justify-content: flex-start;
    margin-top: 5px;
  }

  .user-detail-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Add these specific fixes for thumbnails and cards */

  /* Override thumbnail styles for better mobile display */
  .link-card.thumbnail-style {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
  }
  
  .link-thumbnail, 
  .link-thumbnail-placeholder {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 140px;
    object-fit: cover;
  }
  
  .link-thumbnail-content {
    padding: 10px 5px;
  }
  
  /* Ensure inputs and form elements work properly */
  input[type="text"],
  input[type="url"],
  input[type="color"],
  textarea,
  select,
  .btn {
    font-size: 16px; /* prevents iOS zoom on focus */
    max-width: 100%;
  }
  
  /* Fix display type options spacing */
  .display-type-options {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .display-option {
    margin-bottom: 10px;
    width: 100%;
  }

  /* Fix inline editing forms */
  .inline-edit-form form {
    padding: 10px;
  }
  
  /* Fix spacing in admin panel lists */
  .user-list-item > div {
    position: relative;
    padding-left: 100px;
  }
  
  .user-list-item > div:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 90px;
    font-weight: bold;
    color: #aaa;
  }
}