/**
 * IdeaDunes - Comprehensive Responsive Design Fixes
 * Fixes for mobile, tablet, and large screen layouts
 * Version: 1.0.0
 * Date: 2026-03-30
 */

/* ====================================================================
   MOBILE FIRST APPROACH - BASE STYLES FOR SMALL SCREENS
   ==================================================================== */

/* Footer Responsive - Mobile First */
@media screen and (max-width: 576px) {
  /* Footer Resource Grid */
  .footer-resource-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .footer-resource-card {
    padding: 12px !important;
    font-size: 13px !important;
    width: 100% !important;
  }

  .footer-resource-card h4 {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  /* Footer Industry/Usecase Grid */
  .footer-industry-grid,
  .footer-usecase-strip__grid,
  .footer-compare-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .footer-industry-card,
  .footer-usecase-card,
  .footer-compare-card {
    padding: 12px !important;
    font-size: 13px !important;
  }

  /* Footer Metrics */
  .footer-metric__value {
    font-size: 18px !important;
  }

  .footer-metric__label {
    font-size: 12px !important;
  }

  /* Public Utility Bar */
  .public-utility-bar__inner {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .public-utility-bar__info,
  .public-utility-bar__actions {
    font-size: 12px !important;
    padding: 0 !important;
  }

  .public-utility-bar__actions a {
    padding: 4px 8px !important;
    font-size: 11px !important;
    display: inline-block !important;
  }

  .public-pref-select {
    font-size: 12px !important;
    padding: 4px 6px !important;
    min-width: 80px !important;
  }

  /* Navbar & Header */
  .navbar-brand.logo_name {
    font-size: 16px !important;
  }

  .brand-logo {
    height: 22px !important;
    margin-right: 4px !important;
  }

  .navbar-nav > li.active > a {
    color: #14213d !important;
    font-weight: 700 !important;
    background-color: #eef4ff !important;
  }

  /* Dashboard Specific */
  #sidebar,
  #side-nav,
  .sidebar-nav {
    width: 220px !important;
    position: fixed !important;
    height: 100vh !important;
    z-index: 900 !important;
    overflow-y: auto !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
  }

  .sidebar-open #sidebar,
  .sidebar-open #side-nav,
  .sidebar-open .sidebar-nav {
    transform: translateX(0) !important;
  }

  .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgb(0 0 0 / 50%) !important;
    z-index: 899 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
  }

  .sidebar-open .sidebar-backdrop {
    opacity: 1 !important;
    pointer-events: all !important;
  }

  /* Dashboard Buttons */
  section#header .dashboard-setting .btn,
  section#header .dashboard-setting1 .btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  /* Search Bar */
  .search {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ====================================================================
   TABLET BREAKPOINT (577px - 991px)
   ==================================================================== */

@media screen and (min-width: 577px) and (max-width: 991px) {
  /* Footer Grids - 2 Column Layout */
  .footer-compare-grid,
  .footer-industry-grid,
  .footer-usecase-strip__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .footer-resource-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Dashboard Sidebar - Narrower */
  #sidebar,
  #side-nav,
  .sidebar-nav {
    width: 240px !important;
  }

  /* Content Area with narrower sidebar */
  section#content {
    margin-left: 240px !important;
  }

  /* Search Bar */
  section#header .search {
    max-width: 240px !important;
  }

  /* Tables */
  .table-responsive table td {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  .table-responsive table thead {
    display: table-header-group !important;
  }
}

/* ====================================================================
   SMALL DESKTOP (992px - 1199px)
   ==================================================================== */

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-resource-grid,
  .footer-compare-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  section#header .search {
    max-width: 240px !important;
  }
}

/* ====================================================================
   LARGE DESKTOP (1200px - 1365px)
   ==================================================================== */

@media screen and (min-width: 1200px) and (max-width: 1365px) {
  /* Standard layout */
  .container {
    max-width: 1140px !important;
  }
}

/* ====================================================================
   EXTRA LARGE SCREENS (1366px+) - iPad Pro, Large Monitors
   ==================================================================== */

@media screen and (min-width: 1366px) {
  .container {
    max-width: 1320px !important;
    margin: 0 auto !important;
  }

  .footer-resource-grid,
  .footer-compare-grid,
  .footer-industry-grid,
  .footer-usecase-strip__grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }

  section#header {
    max-width: 1320px !important;
    margin: 0 auto !important;
  }

  section#content {
    max-width: calc(1320px - 260px) !important;
    margin-left: 260px !important;
  }
}

/* ====================================================================
   HIGH DPI DEVICES (Retina)
   ==================================================================== */

@media screen and (min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi) {
  .brand-logo {
    image-rendering: optimize-contrast !important;
  }

  /* Borders should be slightly thicker on retina */
  .footer-resource-card,
  .dashboard-card {
    border: 1px solid rgb(0 0 0 / 5%) !important;
  }
}

/* ====================================================================
   LANDSCAPE ORIENTATION FIXES
   ==================================================================== */

@media screen and (orientation: landscape) and (max-height: 500px) {
  .navbar,
  section#header {
    height: auto !important;
    padding: 8px !important;
  }

  .brand-logo {
    height: 20px !important;
  }

  section#content {
    margin-top: 50px !important;
  }
}

/* ====================================================================
   ACCESSIBILITY - HIGH CONTRAST MODE
   ==================================================================== */

@media (prefers-contrast: more) {
  .footer-resource-card {
    border: 2px solid #000 !important;
    background: #fff !important;
  }

  .navbar {
    border-bottom: 2px solid #000 !important;
  }
}

/* ====================================================================
   REDUCED MOTION
   ==================================================================== */

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

/* ====================================================================
   DARK MODE SUPPORT
   ==================================================================== */

@media (prefers-color-scheme: dark) {
  .footer-metric__value {
    color: #e8e8e8 !important;
  }

  .footer-metric__label {
    color: rgb(255 255 255 / 70%) !important;
  }

  .footer-resource-card {
    background: #1e1e1e !important;
    color: #e8e8e8 !important;
  }
}

/* ====================================================================
   TEXT ZOOM (200%) SUPPORT
   ==================================================================== */

@media (min-width: 0) {
  .standalone-card {
    max-width: 90vw !important;
    padding: 5vw !important;
    margin: auto !important;
  }

  .form-control {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ====================================================================
   PRINT STYLESHEET
   ==================================================================== */

@media print {
  .navbar,
  .sidebar,
  .footer-compare-grid {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .container {
    max-width: 100% !important;
    width: 100% !important;
  }
}