/* ===================================================================
   CryptoPilot - Responsive Stylesheet (responsive.css)
   Breakpoints: 1440px, 1200px, 992px, 768px, 576px, 375px
   =================================================================== */

/* Large Desktop Screens (1440px+) */
@media (min-width: 1440px) {
  .container-fluid {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Medium Desktop (max-width: 1200px) */
@media (max-width: 1200px) {
  .header-ticker-strip {
    display: none;
  }
  .header-search {
    width: 220px;
  }
}

/* Tablets & Below (max-width: 991.98px) */
@media (max-width: 991.98px) {
  :root {
    --cp-sidebar-width: 280px;
    --cp-header-height: 64px;
  }

  /* Sidebar transforms to Offcanvas drawer */
  .app-sidebar {
    transform: translateX(-100%);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
  }

  .app-sidebar.show {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1065 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* Main content takes full width */
  .app-main {
    margin-left: 0 !important;
    width: 100%;
    max-width: 100vw;
  }

  .app-sidebar {
    z-index: 1070 !important;
  }

  .header-toggle-btn {
    display: flex !important;
  }

  .app-header {
    padding: 0 16px;
  }

  .header-search {
    display: none;
  }

  .kpi-card {
    padding: 16px;
  }

  .kpi-value {
    font-size: 20px;
  }

  /* Trading terminal stacked on tablet */
  .trading-terminal-layout {
    flex-direction: column;
  }
}

/* Mobile Devices (max-width: 767.98px) */
@media (max-width: 767.98px) {
  .app-header .header-page-title h4 {
    font-size: 16px;
  }

  .header-breadcrumb {
    display: none;
  }

  .header-user-btn .user-name {
    display: none;
  }

  .header-user-btn {
    padding: 2px;
  }

  .header-right {
    gap: 8px;
  }

  .cp-card {
    padding: 16px;
  }

  .timeframe-filter {
    overflow-x: auto;
    max-width: 100%;
  }

  .auth-card {
    padding: 24px 20px;
  }

  .social-auth-grid {
    grid-template-columns: 1fr;
  }

  .order-book-table {
    font-size: 11px;
  }
}

/* Small Mobile Screens (max-width: 575.98px) */
@media (max-width: 575.98px) {
  .kpi-value {
    font-size: 18px;
  }

  .coin-price {
    font-size: 16px;
  }

  .category-filter-nav {
    padding-bottom: 8px;
  }

  .category-pill {
    font-size: 11px;
    padding: 5px 10px;
  }

  .timeframe-btn {
    padding: 3px 6px;
    font-size: 11px;
  }

  .cp-table thead th,
  .cp-table tbody td {
    padding: 10px 12px;
    font-size: 12px;
  }

  .btn-cp-primary, .btn-cp-ai, .btn-cp-secondary {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* Full mobile width for dropdowns to prevent horizontal scroll */
  .cp-dropdown-menu,
  .dropdown-menu.cp-dropdown-menu {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  /* Modals on mobile */
  .modal-dialog {
    margin: 12px auto;
    max-width: calc(100vw - 24px);
  }
}

/* Extra Small (375px and below) */
@media (max-width: 375px) {
  .app-header {
    padding: 0 10px;
  }

  .header-left {
    gap: 8px;
  }

  .header-right {
    gap: 6px;
  }

  .app-sidebar {
    width: 250px;
  }

  .cp-card {
    padding: 12px;
  }
}