/* Responsive Design - Mobile-First Approach */

/* Mobile Base Styles (320px+) - Already defined in main.css and components.css */

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {

  /* Fix mobile background rendering issues */
  html {
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(135deg, #A8DADC 0%, #1D3557 100%) !important;
    height: 100%;
    overflow: hidden;
  }

  body {
    background-attachment: scroll !important;
    -webkit-overflow-scrolling: touch;
    /* Simplified 2-color gradient for better mobile performance */
    background: linear-gradient(135deg, #A8DADC 0%, #1D3557 100%) !important;
    background-attachment: scroll !important;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  /* Ensure no white gaps around the app container */
  .app-container {
    height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .app-container {
    /* Reduce opacity to show blue background while maintaining readability */
    background: rgba(248, 252, 253, 0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Force hardware acceleration to prevent rendering issues */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Override CSS variables */
    --bg-primary: rgba(248, 252, 253, 0.6) !important;
    --bg-secondary: rgba(248, 252, 253, 0.75) !important;
  }

  /* Override CSS variables specifically for auth-form on small mobile */
  .auth-form {
    --bg-secondary: rgba(248, 252, 253, 0.75) !important;
  }

  /* Fix dashboard elements on small mobile */
  .dashboard-content {
    background: transparent !important;
  }

  .content-header {
    background: rgba(240, 248, 250, 0.75) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .filters-bar {
    background: rgba(240, 248, 250, 0.65) !important;
  }

  .notes-grid {
    background: transparent !important;
  }

  .search-input {
    background: rgba(248, 252, 253, 0.85) !important;
  }

  .note-card {
    background: rgba(240, 248, 250, 0.85) !important;
  }

  /* Fix input group containers */
  .input-group {
    background: transparent !important;
  }

  /* Disable complex background overlay on mobile */
  .app-container::before {
    display: none !important;
  }

  /* Make sections transparent to show gradient background */
  .hero-section,
  .features-section {
    background: transparent !important;
  }

  .hero-title {
    font-size: 2rem;
  }

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

  /* Fix hero section spacing on mobile */
  .hero-section {
    padding: 2rem 0 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .hero-content {
    max-width: 350px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .hero-title {
    margin-bottom: 1rem;
  }

  .hero-subtitle {
    margin-bottom: 2rem;
  }

  /* Fix auth form spacing on mobile */
  .auth-container {
    max-width: 320px;
    margin: 0 auto;
  }

  .auth-form {
    padding: 1.5rem;
    margin: 0 1rem;
    /* Simple direct background like search-input */
    background: rgba(248, 252, 253, 0.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* Auth form specific spacing on mobile - force override */
  .auth-form .input-group {
    margin-bottom: 1.5rem !important;
  }

  /* Add extra spacing between last input and button */
  .auth-form .input-group:last-of-type {
    margin-bottom: 2rem !important;
  }

  /* Other input groups (non-auth) */
  .dashboard-content .input-group,
  .modal .input-group {
    margin-bottom: 1.5rem;
  }

  .btn-primary {
    margin-top: 1.5rem;
    width: 100%;
  }

  .auth-links {
    margin-top: 2rem;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .features-section {
    padding: 1rem 0 3rem 0;
  }

  .nav-content {
    padding: 0 0.5rem;
  }

  .nav-links {
    gap: 1rem;
  }

  /* Fix input field backgrounds on small mobile - darker blue theme */
  .input-group input,
  .input-group textarea,
  .input-group select {
    background: rgba(27, 79, 114, 0.15) !important;
    border: 1px solid rgba(27, 79, 114, 0.4) !important;
    color: var(--text-primary) !important;
  }

  .modal-content {
    margin: 0.5rem;
    border-radius: 16px;
  }

  .modal-header,
  .modal-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

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

  .feature-card {
    padding: 1.5rem;
  }
}

/* Tablet Portrait (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {

  /* Also simplify for tablet portrait to prevent issues */
  body {
    background-attachment: scroll !important;
  }

  .app-container::before {
    display: none !important;
  }

  .app-container {
    background: rgba(248, 252, 253, 0.7) !important;
    /* Override CSS variables */
    --bg-primary: rgba(248, 252, 253, 0.7) !important;
  }

  /* Fix hero section centering and spacing on tablet */
  .hero-section {
    padding: 2.5rem 0 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .hero-content {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .hero-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }

  .hero-subtitle {
    margin-bottom: 2.5rem;
  }

  /* Fix auth form spacing on tablet */
  .auth-container {
    max-width: 380px;
    margin: 0 auto;
  }

  .auth-form {
    padding: 2rem;
    margin: 0 1rem;
  }

  /* Auth form specific spacing on tablet - force override */
  .auth-form .input-group {
    margin-bottom: 1.5rem !important;
  }

  /* Add extra spacing between last input and button on tablet */
  .auth-form .input-group:last-of-type {
    margin-bottom: 2rem !important;
  }

  /* Other input groups (non-auth) */
  .dashboard-content .input-group,
  .modal .input-group {
    margin-bottom: 1.5rem;
  }

  .btn-primary {
    margin-top: 1.5rem;
  }

  .features-section {
    padding: 1.5rem 0 4rem 0;
  }

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

  .nav-links {
    gap: 1.25rem;
  }
}

/* Tablet Landscape (768px - 1023px) */
@media (min-width: 768px) {
  .hero-section {
    padding: 4rem 0 2rem 0;
  }

  .features-section {
    padding: 2rem 0 4rem 0;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .nav-content {
    padding: 0 2rem;
  }

  /* Dashboard Layout for Tablets */
  .dashboard-main {
    padding: 0;
  }

  .notes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Account page layout */
  .account-main {
    padding: 2rem;
  }

  .account-container {
    max-width: 800px;
    margin: 0 auto;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .hero-title {
    font-size: 3.5rem;
  }

  .hero-subtitle {
    font-size: 1.375rem;
  }

  .hero-section {
    padding: 5rem 0 3rem 0;
  }

  .features-section {
    padding: 3rem 0 5rem 0;
  }

  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  .nav-content {
    padding: 0 3rem;
  }

  /* Enhanced Dashboard Layout for Desktop */
  .dashboard-main {
    padding: 0;
  }

  .notes-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  /* Account page enhancements */
  .account-main {
    padding: 3rem;
  }

  .account-container {
    max-width: 900px;
  }

  /* Larger modals on desktop */
  .modal-content {
    max-width: 600px;
  }

  /* Enhanced button hover effects */
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: translateY(-2px);
  }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }

  .hero-section {
    padding: 6rem 0 4rem 0;
  }

  .features-section {
    padding: 4rem 0 6rem 0;
  }

  .dashboard-main {
    padding: 0;
  }

  .notes-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .account-main {
    padding: 4rem;
  }
}

/* Dashboard Specific Responsive Styles */

/* Mobile Dashboard (up to 767px) */
@media (max-width: 767px) {
  .dashboard-main {
    padding: 0;
  }

  .content-header {
    padding: 1rem;
    overflow: visible;
    /* Fix for mobile - prevents notes from being hidden behind header */
  }

  .header-top {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .header-right {
    justify-content: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
  }

  .btn-icon {
    padding: 0.375rem 0.625rem;
    font-size: 0.7rem;
    min-width: auto;
    white-space: nowrap;
    border-radius: 20px;
    font-weight: 500;
  }

  /* Make New Note button same style as other dashboard buttons on mobile */
  #newNoteBtn {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.7rem !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
    min-width: auto !important;
    white-space: nowrap !important;
  }

  /* Make selection actions chip-style on mobile */
  .selection-info {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  /* Mobile logout button styling */
  .logout-btn {
    padding: 0.5rem 0.75rem !important;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .logout-btn .logout-text {
    display: none;
    /* Hide text on mobile, show only icon */
  }

  .logout-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Show footer on mobile by default (main page) */
  .site-footer {
    display: block;
  }

  /* Hide footer on mobile for dashboard pages (when dashboard-main exists) */
  .dashboard-main~.site-footer {
    display: none;
  }

  /* Hide footer on mobile for account pages (when account-main exists) */
  .account-main~.site-footer {
    display: none;
  }

  .filters-bar {
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 1.5rem;
    padding-top: 1rem;
  }

  .search-section {
    min-width: auto;
    max-width: none;
    flex: 1;
  }

  .filters-section {
    justify-content: stretch;
    width: 100%;
    gap: 1rem;
  }

  .filter-select {
    flex: 1;
    min-width: auto;
  }

  .selection-actions {
    padding: 0.75rem 1rem;
    flex-direction: column;
    gap: 0.75rem;
  }

  .selection-controls,
  .bulk-actions {
    justify-content: stretch;
  }

  .selection-controls button,
  .bulk-actions button {
    flex: 1;
  }

  .notes-grid {
    padding: 1rem;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .note-card {
    height: auto;
    min-height: 160px;
  }

  .note-card-selection {
    top: 0.5rem;
    right: 0.5rem;
  }

  /* Note panel on mobile - full screen */
  .note-panel {
    width: 100vw;
    left: 0;
    right: 0;
    border-left: none;
    border-top: 1px solid var(--border-color);
  }

  .note-panel-content {
    padding: 1rem;
  }

  /* Notifications on mobile */
  .notification {
    top: 10px;
    right: 10px;
    left: 10px;
    transform: translateY(-100%);
  }

  .notification.show {
    transform: translateY(0);
  }
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
  .notes-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .content-header {
    padding: 1.5rem;
    overflow: visible;
    /* Fix for tablet - prevents notes from being hidden behind header */
  }

  /* Fix dashboard header buttons on tablet */
  .header-right {
    gap: 0.875rem;
  }

  .btn-icon {
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
    border-radius: 16px;
    font-weight: 500;
  }

  /* Make New Note button same style as other dashboard buttons on tablet */
  #newNoteBtn {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.8rem !important;
    border-radius: 16px !important;
    font-weight: 500 !important;
    min-width: auto !important;
    white-space: nowrap !important;
  }

  .filters-bar {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
  }

  /* Show logout text on tablet */
  .logout-btn .logout-text {
    display: inline;
  }

  /* Show footer on tablet and larger */
  .site-footer {
    display: block;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .notes-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  /* Show logout text on desktop */
  .logout-btn .logout-text {
    display: inline;
  }

  /* Show footer on desktop */
  .site-footer {
    display: block;
  }
}

/* Removed problematic height-based media query that was causing scroll issues */

/* Large desktop styles */
@media (min-width: 1440px) {
  .notes-grid {
    padding: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
  }

  .content-header {
    padding: 2rem 3rem;
  }
}

/* Account Page Responsive Styles */

/* Mobile Account (up to 767px) */
@media (max-width: 767px) {
  .account-main {
    padding: 1rem;
  }

  .account-section {
    margin-bottom: 1.5rem;
  }

  .subscription-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .subscription-actions button {
    width: 100%;
  }

  .data-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .data-actions button {
    width: 100%;
  }

  .premium-features ul {
    padding-left: 1rem;
  }

  .premium-features li {
    margin-bottom: 0.5rem;
  }
}

/* Touch-Friendly Interactions */
@media (hover: none) and (pointer: coarse) {

  /* Increase touch targets for mobile */
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    min-height: 44px;
    padding: 0.875rem 1.5rem;
  }

  .nav-link {
    padding: 0.75rem 0;
  }

  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }

  .input-group input,
  .input-group textarea,
  .input-group select {
    min-height: 44px;
    padding: 0.875rem 1rem;
  }

  /* Remove hover effects on touch devices */
  .card:hover,
  .feature-card:hover,
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }

  /* Enhanced focus states for accessibility */
  .btn-primary:focus,
  .btn-secondary:focus,
  .btn-danger:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

  /* Enhance glassmorphism effects on high DPI displays */
  .app-container,
  .card,
  .auth-form,
  .modal-content {
    backdrop-filter: blur(calc(var(--backdrop-blur) * 1.2));
    -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 1.2));
  }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .app-container::before {
    animation: none;
  }
}

/* Print Styles */
@media print {

  .nav-header,
  .modal,
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    display: none !important;
  }

  .app-container {
    background: white !important;
    box-shadow: none !important;
  }

  .card,
  .auth-form {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {

  /* iOS Safari - completely disable complex effects and fix white bars */
  html {
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(135deg, #A8DADC 0%, #1D3557 100%) !important;
    height: 100%;
    height: 100dvh;
    /* Dynamic viewport */
    height: -webkit-fill-available;
    /* Fix Safari bottom white bar */
    overflow: hidden;
    /* Prevent overscroll bounce showing white */
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    /* Fix white bars - remove default margins */
    margin: 0 !important;
    padding: 0 !important;
    /* Ensure background covers entire viewport including safe areas */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  body {
    background: linear-gradient(135deg, #A8DADC 0%, #1D3557 100%) !important;
    background-attachment: scroll !important;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport */
    height: -webkit-fill-available;
    /* Fix Safari bottom white bar */
    overflow: hidden;
    /* Fix white bars - remove default margins and padding */
    margin: 0 !important;
    padding: 0 !important;
    /* Safe area padding for Safari - but only for content, not background */
    /* Prevent overscroll bounce showing white */
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    /* Ensure background covers entire viewport including safe areas */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
  }

  /* Create a full-screen background layer that extends into safe areas */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #A8DADC 0%, #1D3557 100%);
    z-index: -1;
    /* Extend into safe areas */
    margin-top: calc(-1 * env(safe-area-inset-top));
    margin-bottom: calc(-1 * env(safe-area-inset-bottom));
    margin-left: calc(-1 * env(safe-area-inset-left));
    margin-right: calc(-1 * env(safe-area-inset-right));
  }

  /* Fix all heading elements that might have default margins */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Fix navigation text specifically */
  .navigationtext h2 {
    margin: 0 !important;
    padding: 0 !important;
  }

  .app-container {
    background: rgba(248, 252, 253, 0.8) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Force hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Remove any margins that could cause white bars */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Completely remove the problematic overlay on iOS */
  .app-container::before {
    display: none !important;
  }

  /* Simplify all glassmorphism on iOS */
  .auth-form,
  .feature-card,
  .nav-header,
  .card,
  .modal-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
    /* Reduce opacity to show some background */
  }

  /* Make sections transparent to show gradient background */
  .hero-section,
  .features-section {
    background: transparent !important;
  }
}

/* Additional mobile performance optimizations */
@media (max-width: 767px) {

  /* Fix mobile background coverage */
  html {
    background: linear-gradient(135deg, #A8DADC 0%, #1D3557 100%) !important;
    height: 100%;
    height: 100dvh;
    /* Dynamic viewport */
    height: -webkit-fill-available;
    /* Safari fallback */
    overflow: hidden;
    /* Prevent fade effects */
    -webkit-appearance: none;
    appearance: none;
  }

  body {
    background: linear-gradient(135deg, #A8DADC 0%, #1D3557 100%) !important;
    background-attachment: scroll !important;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport */
    height: -webkit-fill-available;
    /* Safari fallback */
    overflow: hidden;
    margin: 0;
    padding: 0;
    /* Safe area padding for notched devices */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Prevent fade effects */
    -webkit-appearance: none;
    appearance: none;
  }

  /* Ensure app container shows background gradient */
  .app-container {
    background: rgba(248, 252, 253, 0.65) !important;
    --bg-primary: rgba(248, 252, 253, 0.65) !important;
    --bg-secondary: rgba(248, 252, 253, 0.75) !important;
    height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  /* Fix dashboard elements on mobile */
  .dashboard-content {
    background: transparent !important;
  }

  .content-header {
    background: rgba(240, 248, 250, 0.8) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    /* Fix for iOS - prevents notes from being hidden behind header */
  }

  .filters-bar {
    background: rgba(240, 248, 250, 0.7) !important;
  }

  .notes-grid {
    background: transparent !important;
  }

  .search-input {
    background: rgba(248, 252, 253, 0.9) !important;
  }

  .note-card {
    background: rgba(240, 248, 250, 0.9) !important;
  }

  /* Fix input group containers */
  .input-group {
    background: transparent !important;
  }

  /* Simplify all glassmorphism effects on mobile */
  .auth-form,
  .feature-card,
  .nav-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(248, 252, 253, 0.9) !important;
    border: 1px solid rgba(27, 79, 114, 0.3) !important;
    box-shadow: none !important;
  }

  /* Fix input field backgrounds on mobile - darker blue theme */
  .input-group input,
  .input-group textarea,
  .input-group select {
    background: rgba(27, 79, 114, 0.2) !important;
    border: 1px solid rgba(27, 79, 114, 0.4) !important;
    color: var(--text-primary) !important;
  }

  /* Ensure sections are transparent on mobile */
  .hero-section,
  .features-section {
    background: transparent !important;
  }
}

/* Dark mode mobile fixes */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  html {
    background: linear-gradient(135deg, #1D3557 0%, #0A1A24 100%) !important;
    height: 100%;
    overflow: hidden;
  }

  body {
    background: linear-gradient(135deg, #1D3557 0%, #0A1A24 100%) !important;
    background-attachment: scroll !important;
    height: 100vh;
    overflow: hidden;
  }

  .app-container {
    background: rgba(15, 35, 50, 0.8) !important;
    --bg-primary: rgba(15, 35, 50, 0.8) !important;
    --bg-secondary: rgba(20, 45, 65, 0.8) !important;
  }

  /* Fix dashboard elements in dark mode */
  .dashboard-content {
    background: transparent !important;
  }

  .content-header {
    background: rgba(20, 45, 65, 0.85) !important;
  }

  .filters-bar {
    background: rgba(20, 45, 65, 0.8) !important;
  }

  .notes-grid {
    background: transparent !important;
  }

  .search-input {
    background: rgba(25, 55, 80, 0.9) !important;
  }

  .note-card {
    background: rgba(20, 45, 65, 0.9) !important;
  }

  .input-group {
    background: transparent !important;
  }

  .auth-form,
  .feature-card,
  .nav-header {
    background: rgba(20, 45, 65, 0.75) !important;
    border: 1px solid rgba(168, 218, 220, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* Specifically target auth-form in dark mode */
  .auth-form {
    background: rgba(20, 45, 65, 0.75) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* iOS Safari dark mode */
@supports (-webkit-touch-callout: none) {
  @media (prefers-color-scheme: dark) {
    html {
      background: linear-gradient(135deg, #1D3557 0%, #0A1A24 100%) !important;
      height: 100%;
      overflow: hidden;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

    body {
      background: linear-gradient(135deg, #1D3557 0%, #0A1A24 100%) !important;
      background-attachment: scroll !important;
      height: 100vh;
      overflow: hidden;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    /* Create a full-screen dark background layer that extends into safe areas */
    body::before {
      background: linear-gradient(135deg, #1D3557 0%, #0A1A24 100%);
    }

    .app-container {
      background: rgba(15, 35, 50, 0.85) !important;
      --bg-primary: rgba(15, 35, 50, 0.85) !important;
      --bg-secondary: rgba(20, 45, 65, 0.85) !important;
    }

    /* Fix dashboard elements in iOS Safari dark mode */
    .dashboard-content {
      background: transparent !important;
    }

    .content-header {
      background: rgba(20, 45, 65, 0.9) !important;
      overflow: visible !important;
      /* Fix for iOS dark mode - prevents notes from being hidden behind header */
    }

    .filters-bar {
      background: rgba(20, 45, 65, 0.85) !important;
    }

    .notes-grid {
      background: transparent !important;
    }

    .search-input {
      background: rgba(25, 55, 80, 0.95) !important;
    }

    .note-card {
      background: rgba(20, 45, 65, 0.95) !important;
    }

    .input-group {
      background: transparent !important;
    }

    .auth-form,
    .feature-card,
    .nav-header,
    .card,
    .modal-content {
      background: rgba(20, 45, 65, 0.9) !important;
    }
  }
}

/* Footer Responsive Styles */
@media (max-width: 767px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .footer-links {
    justify-content: center;
    gap: 1.5rem;
  }

  .site-footer {
    padding: 1.5rem 0;
  }

  /* Privacy and Terms pages on mobile */
  .privacy-main,
  .terms-main {
    padding: 1rem 0;
    flex: 1;
  }

  .privacy-container h1,
  .terms-container h1 {
    font-size: 2rem;
  }

  .privacy-section,
  .terms-section {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 480px) {
  .footer-links {
    flex-direction: column;
    gap: 1rem;
  }

  .privacy-container h1,
  .terms-container h1 {
    font-size: 1.75rem;
  }
}

/* Fix Chro
me mobile fade effect and bottom cut-off */
@media screen and (max-width: 768px) {

  /* Prevent Chrome's fade effect at bottom */
  html,
  body {
    position: relative;
    overflow-x: hidden;
    /* Remove any default fade masks */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .app-container {
    /* Ensure content reaches full bottom */
    padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
    /* Remove any fade masks */
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Specifically target the footer to ensure it's visible */
  .site-footer {
    margin-bottom: env(safe-area-inset-bottom);
    /* Ensure footer background extends to bottom */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* Chrome Android specific fixes */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
  body {
    /* Force Chrome to show full content */
    min-height: 100vh;
    min-height: 100dvh;
    /* Prevent Chrome's automatic fade */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .app-container {
    /* Ensure container fills viewport completely */
    min-height: 100vh;
    min-height: 100dvh;
    /* Add extra padding for gesture area */
    padding-bottom: calc(env(safe-area-inset-bottom) + 2rem);
  }
}

/* Additional fix for mobile browser UI overlays */
@media screen and (max-width: 768px) {

  /* Prevent any browser-applied fade effects */
  *,
  *::before,
  *::after {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Ensure full viewport coverage and fix white bars */
  html {
    background-color: #1D3557;
    /* Fallback color matching gradient end */
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    background-color: #1D3557;
    /* Fallback color matching gradient end */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Fix all heading elements on mobile */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Fix navigation and container elements */
  #container,
  #navigation,
  #content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .navigationtext h2 {
    margin: 0 !important;
  }
}

/* Com
prehensive Mobile Safari White Bar Fix */
@media screen and (max-width: 768px) {

  /* Force remove all default margins and padding that cause white bars */
  html,
  body,
  * {
    margin: 0 !important;
  }

  /* Specifically target common elements that have default margins */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  li,
  div,
  section,
  article,
  header,
  footer,
  nav {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Fix body to prevent white space */
  body {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: -webkit-fill-available !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
  }

  /* Fix app container positioning */
  .app-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Safari-specific white bar elimination */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 768px) {

    /* Prevent Safari's default margins on all elements */
    * {
      margin: 0 !important;
    }

    /* Force body to fill entire viewport */
    body {
      position: fixed !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
      /* Prevent overscroll bounce that shows white */
      overscroll-behavior: none !important;
      -webkit-overscroll-behavior: none !important;
    }

    /* Ensure app container scrolls properly */
    .app-container {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      overflow-y: scroll !important;
      -webkit-overflow-scrolling: touch !important;
    }
  }
}