/* ============================================
   ForexTrade Responsive Styles
   ============================================ */

@media (min-width: 1200px) {
  .dashboard-body {
    max-width: var(--content-max-width);
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 1199.98px) {
  .onboarding-intro {
    flex: 0 0 180px;
  }

  .row .col-lg-4 .wallet-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .onboarding-banner {
    flex-direction: column;
    gap: var(--space-3);
  }

  .onboarding-intro {
    flex: none;
    padding-inline-end: 0;
    padding-block-end: var(--space-3);
    border-inline-end: none;
    border-block-end: 1px solid var(--surface-border);
  }

  .onboarding-steps {
    grid-template-columns: 1fr;
  }

  .app-wrapper {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .app-body {
    display: block;
    overflow: visible;
    min-height: calc(100dvh - var(--topbar-height));
  }

  .sidebar {
    position: fixed;
    inset-block-start: var(--topbar-height);
    inset-block-end: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    height: 100vh;
    margin-block-start: 0;
    transform: translateX(-100%);
    z-index: var(--z-sidebar);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
    pointer-events: none;
    inset-block-start: var(--topbar-height);
  }

  .sidebar-overlay.active {
    pointer-events: auto;
  }

  .sidebar-toggle {
    display: flex;
  }

  .main-content {
    width: 100%;
    height: auto;
    overflow-y: visible;
    min-height: calc(100dvh - var(--topbar-height));
  }

  .dashboard-body {
    padding: var(--space-5);
  }

  .activation-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-search {
    max-width: 200px;
  }

  .topbar-user-info {
    display: none;
  }

  .topbar-wallet-amount {
    font-size: var(--font-size-xs);
  }

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

  .data-table {
    min-width: 680px;
  }

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

  .auth-brand-panel {
    display: none;
  }

  .auth-form-panel {
    min-height: 100dvh;
    padding: var(--space-6);
  }

  .auth-form-container,
  .auth-form-container--wide {
    max-width: 100%;
  }

  .auth-form-header {
    margin-block-end: var(--space-6);
  }

  .signup-form-grid,
  .password-rule-list {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Dashboard — tablet */
  html:has(.app-wrapper) {
    overflow-x: clip;
  }

  .app-wrapper {
    overflow-x: clip;
  }

  .main-content {
    padding-block-end: calc(var(--space-16) + 56px);
  }

  .deposit-head {
    flex-direction: column;
    align-items: stretch;
  }

  .deposit-head .btn-outline-action {
    width: 100%;
    justify-content: center;
  }

  .downline-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .downline-filter-actions {
    grid-column: 1 / -1;
  }

  .statement-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .statement-toolbar .ledger-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .statement-toolbar .ledger-tabs::-webkit-scrollbar {
    display: none;
  }

  .breakdown-body {
    flex-direction: column;
    align-items: center;
  }

  .breakdown-legend {
    width: 100%;
    min-width: 0;
  }

  .activation-stat-card {
    flex-wrap: wrap;
  }

  .activation-stat-card .stat-trend {
    margin-inline-start: 0;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline-start: calc(48px + var(--space-4));
  }

  .input-with-action {
    flex-direction: column;
    align-items: stretch;
  }

  .input-with-action .input-action-btn {
    width: 100%;
    min-height: 44px;
  }

  .activation-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .activation-pagination-actions {
    justify-content: center;
  }

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

  .tree2-zoom-stage {
    min-width: min-content;
  }

  .onboarding-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .onboarding-actions .btn-accent,
  .onboarding-actions .btn-outline-action {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  .balance-summary-card {
    min-height: 145px;
    padding: var(--space-5);
  }

  .topbar {
    padding: 0 var(--space-4);
    gap: var(--space-2);
  }

  .topbar-search {
    display: none;
  }

  .topbar-brand {
    display: none;
  }

  .topbar-brand-name {
    font-size: var(--font-size-sm);
  }

  .topbar-wallet {
    padding: 0 var(--space-3);
  }

  .notification-dropdown {
    inset-inline-end: calc(-1 * var(--space-12));
  }

  .quick-actions-bar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 2px;
    padding: var(--space-1);
    overflow-x: visible;
    width: 100%;
    max-width: 100%;
  }

  .dash-welcome {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .dash-quick-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 2px;
    padding: var(--space-1);
    overflow-x: visible;
    width: 100%;
    max-width: 100%;
  }

  .dash-quick-actions .quick-action-btn,
  .quick-actions-bar .quick-action-btn,
  .quick-action-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    width: auto;
    padding: var(--space-1) 1px;
    gap: 2px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .dash-quick-actions .quick-action-label,
  .quick-action-label {
    white-space: normal;
    font-size: 0.5625rem;
    line-height: 1.15;
    text-align: center;
    word-break: break-word;
  }

  .quick-action-icon {
    width: 28px;
    height: 28px;
    font-size: 0.6875rem;
  }

  .quick-action-divider {
    display: none;
  }

  .designation-profile {
    flex-direction: column;
    text-align: center;
  }

  .panel-card {
    padding: var(--space-5);
  }

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

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .panel-toolbar {
    width: 100%;
    flex-direction: column;
  }

  .activation-hero-actions,
  .activation-table-controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .activation-hero-actions .btn-accent,
  .activation-hero-actions .btn-outline-action,
  .activation-filter {
    width: 100%;
  }

  .downline-filter-grid {
    grid-template-columns: 1fr;
  }

  .downline-filter-actions {
    grid-column: auto;
    width: 100%;
  }

  .downline-filter-actions .btn-accent,
  .downline-filter-actions .btn-outline-action {
    width: 100%;
  }

  .downline-table-toolbar {
    overflow-x: auto;
  }

  .deposit-available-card {
    flex-direction: column;
  }

  .withdraw-form-card {
    height: auto;
  }

  .deposit-address-content,
  .deposit-panel-grid,
  .withdraw-form-grid,
  .profile-info-grid {
    grid-template-columns: 1fr;
  }

  .profile-head-actions,
  .profile-hero-actions {
    width: 100%;
  }

  .profile-head-actions .btn-accent,
  .profile-head-actions .btn-outline-action,
  .profile-hero-actions .btn-accent,
  .profile-hero-actions .btn-outline-action {
    flex: 1 1 auto;
    justify-content: center;
  }

  .profile-hero-body {
    padding-inline: var(--space-4);
  }

  .profile-hero-actions {
    margin-inline-start: 0;
  }

  .profile-setting {
    flex-wrap: wrap;
  }

  .profile-setting-text {
    flex-basis: calc(100% - 42px - var(--space-4));
  }

  .profile-setting .profile-info-action,
  .profile-setting .profile-status-pill {
    margin-inline-start: calc(42px + var(--space-4));
  }

  .deposit-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .deposit-network-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .deposit-network-tabs::-webkit-scrollbar {
    display: none;
  }

  .deposit-network-tabs .ledger-tab {
    flex: 1 0 auto;
  }

  .deposit-qr-card {
    max-width: 180px;
    width: 100%;
    margin-inline: auto;
  }

  .toolbar-search,
  .toolbar-search input {
    width: 100%;
    min-width: unset;
  }

  .btn-filter {
    width: 100%;
    justify-content: center;
  }

  .chart-container,
  .chart-container--lg {
    height: 240px;
  }

  .auth-stats {
    flex-direction: column;
    gap: var(--space-4);
  }

  .auth-form-panel {
    padding: var(--space-5);
  }

  .auth-form-header {
    margin-block-end: var(--space-5);
  }

  .auth-form-header h2 {
    font-size: var(--font-size-xl);
  }

  .auth-form {
    gap: var(--space-3);
  }

  #loginForm .d-flex {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Dashboard — mobile */
  .topbar {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .topbar-left {
    gap: var(--space-2);
    min-width: 0;
  }

  .topbar-right {
    gap: var(--space-2);
  }

  .topbar-notify,
  .theme-toggle,
  .accent-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: var(--font-size-base);
  }

  .topbar-user {
    width: auto;
    min-width: 40px;
    height: 40px;
    padding: var(--space-1);
  }

  .topbar-user-avatar {
    width: 32px;
    height: 32px;
  }

  .topbar-wallet {
    padding: 0 var(--space-2);
    min-height: 40px;
  }

  .user-dropdown {
    position: fixed;
    inset-inline: var(--space-4);
    inset-block-start: calc(var(--topbar-height) + var(--space-2));
    width: auto;
  }

  .dashboard-body {
    padding: var(--space-4);
  }

  .dashboard-body > .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }

  .deposit-head h1,
  .activation-hero h1 {
    font-size: var(--font-size-xl);
  }

  .deposit-head-desc {
    font-size: var(--font-size-xs);
  }

  .profile-hero-body {
    flex-direction: column;
    align-items: flex-start;
    margin-block-start: -32px;
  }

  .profile-hero-name {
    font-size: var(--font-size-xl);
  }

  .profile-hero-meta {
    gap: var(--space-2);
  }

  .profile-chip {
    font-size: var(--font-size-xs);
  }

  .profile-hero-actions {
    flex-direction: column;
  }

  .profile-hero-actions .btn-accent,
  .profile-hero-actions .btn-outline-action {
    width: 100%;
  }

  .designation-stat-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .section-heading {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .activation-table-card,
  .downline-table-card.panel-card--compact {
    padding: var(--space-3);
  }

  .downline-filter-card.panel-card {
    padding: var(--space-3) var(--space-4);
  }

  .downline-table {
    min-width: 640px;
  }

  .notif-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .notif-item {
    padding: var(--space-3);
  }

  .app-modal .modal-dialog {
    margin: var(--space-3);
    max-width: none;
  }

  .ledger-tabs,
  .downline-view-tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ledger-tabs::-webkit-scrollbar,
  .downline-view-tabs::-webkit-scrollbar {
    display: none;
  }

  .downline-view-tabs {
    width: 100%;
  }

  .downline-view-tabs .ledger-tab {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
  }

  .activity-cell {
    gap: var(--space-2);
  }

  .rank-progress-card .panel-header,
  .designation-card .panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .balance-summary-foot {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

@media (max-width: 479.98px) {
  :root {
    --sidebar-width: 260px;
    --topbar-height: 64px;
  }

  .sidebar {
    max-width: var(--sidebar-width);
  }

  .topbar-wallet-amount {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .notification-dropdown {
    position: fixed;
    inset-inline: var(--space-4);
    inset-block-start: calc(var(--topbar-height) + var(--space-2));
    width: auto;
  }

  .auth-form-panel {
    padding: var(--space-4);
  }

  .deposit-modal .modal-header {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .deposit-modal .modal-body {
    padding: 0 var(--space-4) var(--space-4);
  }

  .deposit-modal .modal-title {
    font-size: var(--font-size-lg);
  }

  .deposit-instructions h3 {
    font-size: var(--font-size-base);
  }

  .deposit-address-box {
    grid-template-columns: 1fr;
  }

  .withdraw-control,
  .withdraw-input-prefix {
    min-height: 46px;
  }

  .withdraw-info {
    align-items: flex-start;
    padding: var(--space-3);
  }

  .btn-copy-address {
    width: 100%;
  }

  .auth-form-header {
    margin-block-end: var(--space-4);
  }

  .form-control-custom {
    font-size: var(--font-size-xs);
  }

  .password-rule-list {
    gap: var(--space-2);
  }

  /* Dashboard — small mobile */
  .topbar-wallet i {
    display: none;
  }

  .topbar-notify,
  .theme-toggle,
  .accent-toggle {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .topbar-user {
    min-width: 38px;
    height: 38px;
  }

  .topbar-user-avatar {
    width: 30px;
    height: 30px;
  }

  .dashboard-body {
    padding: var(--space-3);
  }

  .main-content {
    padding-block-end: calc(var(--space-12) + 52px);
  }

  .theme-tools-dock {
    padding: var(--space-1);
    gap: var(--space-1);
  }

  .theme-tools-dock .theme-toggle,
  .theme-tools-dock .accent-toggle {
    width: 38px;
    height: 38px;
    font-size: var(--font-size-base);
  }

  .balance-summary-amount {
    font-size: var(--font-size-2xl);
  }

  .panel-card {
    padding: var(--space-4);
  }

  .downline-filter-actions {
    flex-direction: column;
  }

  .downline-filter-actions .btn-accent,
  .downline-filter-actions .btn-outline-action {
    width: 100%;
  }

  .activation-stat-card .stat-trend {
    padding-inline-start: 0;
    margin-block-start: var(--space-2);
  }

  .profile-setting-value--mono {
    word-break: break-all;
  }

  .deposit-address-box {
    gap: var(--space-2);
  }

  .deposit-address-box code {
    word-break: break-all;
    font-size: var(--font-size-xs);
  }
}

@supports (container-type: inline-size) {
  .overview-card {
    container-type: inline-size;
  }

  @container (max-width: 260px) {
    .overview-value {
      font-size: var(--font-size-xl);
    }
  }
}

@media (max-width: 575.98px) {
  .theme-tools-dock {
    inset-block-end: max(var(--space-4), env(safe-area-inset-bottom, 0px));
    inset-inline-end: max(var(--space-4), env(safe-area-inset-right, 0px));
  }

  .quick-actions-card,
  .onboarding-banner {
    padding: var(--space-4);
  }

  .dash-welcome-title {
    font-size: var(--font-size-xl);
  }

  .overview-value {
    font-size: var(--font-size-2xl);
  }

  .wallet-mini-card,
  .wallet-balance {
    word-break: break-word;
  }
}

@media print {
  .sidebar,
  .sidebar-toggle,
  .sidebar-overlay,
  .topbar {
    display: none !important;
  }

  .app-body {
    padding-block-start: 0;
  }

  .overview-card,
  .panel-card {
    break-inside: avoid;
    border: 1px solid #ddd;
  }
}

@media (hover: none) {
  .overview-card:hover,
  .btn-accent:hover,
  .btn-auth-submit:hover {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .overview-card,
  .panel-card {
    border-width: 2px;
  }
}

/* Styles for tablets and larger screens */
@media (max-width: 768px) {
  .small-device-css {
    margin-top:55px;
  }
}