/* Responsive Layout Improvements for Agentes Portal */
/* This CSS file increases main body width on smaller displays */

/* Override Bootstrap container max-widths for better space utilization */
@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 95%; /* Increased from 540px */
  }
}

@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 95%; /* Increased from 720px */
  }
}

@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 95%; /* Increased from 960px */
  }
}

@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 90%; /* Increased from 1140px */
  }
}

@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 90%; /* Increased from 1320px */
  }
}

/* Improve stats cards layout on smaller screens */
@media (max-width: 991px) {
  /* Stack stats cards in 2x2 grid on tablets */
  .row.mb-4 > .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 1rem;
  }
}

@media (max-width: 767px) {
  /* Stack stats cards vertically on mobile */
  .row.mb-4 > .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.75rem;
  }
  
  /* Make conversation list full width on mobile */
  .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Make chat area full width on mobile */
  .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 1rem;
  }
}

/* Optimize card content to prevent text wrapping */
.card-body {
  padding: 1rem; /* Slightly reduced padding for more content space */
}

/* Ensure client card text doesn't wrap unnecessarily */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* For medium screens, adjust the conversation/chat split */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Give more space to chat area */
  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

/* Improve conversation list items on smaller screens */
@media (max-width: 991px) {
  .conversation-item {
    padding: 0.75rem;
  }
  
  .conversation-item .badge {
    font-size: 0.75rem;
  }
}

/* Ensure container-fluid uses full width properly */
.container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 100%;
}

/* Reduce horizontal padding on very small screens */
@media (max-width: 575px) {
  .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  .card {
    margin-bottom: 0.5rem;
  }
}

/* Optimize message bubbles for better space usage */
@media (max-width: 767px) {
  .message-text {
    max-width: 85%; /* Allow messages to use more width on mobile */
  }
}

/* Ensure proper text flow in stats cards */
.card-body h6.card-title {
  font-size: 0.875rem; /* Slightly smaller to prevent wrapping */
  line-height: 1.2;
}

@media (max-width: 575px) {
  .card-body h6.card-title {
    font-size: 0.8rem;
  }
  
  .card-body h2 {
    font-size: 1.5rem;
  }
}