/* Mobile Optimization for WithU */

/* Reduce container padding on mobile */
@media screen and (max-width: 768px) {
  .container {
    padding: 0 5px;
  }

  /* Reduce box margins and padding */
  .box {
    margin-bottom: 1rem;
    padding: 1rem;
  }

  /* Reduce title margins */
  .title {
    margin-bottom: 0.75rem;
  }

  .subtitle {
    margin-bottom: 0.5rem;
  }

  /* Optimize filter section */
  .box.slide-in-left {
    padding: 1rem;
  }

  /* Reduce field spacing */
  .field {
    margin-bottom: 0.75rem;
  }

  /* Compact buttons */
  .buttons {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .button.is-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  /* Optimize summary stats */
  .summary-stats .column {
    padding: 0.25rem;
  }

  .notification {
    padding: 0.5rem;
  }

  .notification .title {
    font-size: 1rem;
  }

  .notification .heading {
    font-size: 0.75rem;
  }

  /* Compact table for mobile */
  .table {
    font-size: 0.875rem;
  }

  .table td, .table th {
    padding: 0.25rem;
  }

  /* Adjust pagination for mobile */
  .query-pagination {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid #eee;
  }

  .query-page-size {
    justify-content: center;
    align-items: center;
  }

  .query-page-controls {
    justify-content: center;
  }

  .query-page-controls .button {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }

  /* Optimize chart containers */
  .chart-container {
    height: 200px !important;
    margin: 0.5rem 0;
  }

  /* Modal adjustments */
  .modal-card {
    margin: 1rem;
    width: calc(100vw - 2rem);
  }

  .modal-card-body {
    padding: 1rem;
  }

  /* Reduce heading sizes */
  h1.title {
    font-size: 1.5rem;
  }

  h2.subtitle {
    font-size: 1.25rem;
  }

  h3.subtitle {
    font-size: 1.125rem;
  }

  /* Optimize form controls */
  .control .select {
    width: 100%;
  }

  .select select {
    padding: 0.25rem;
    font-size: 0.875rem;
  }

  .input {
    padding: 0.25rem;
    font-size: 0.875rem;
  }

  .label {
    font-size: 0.875rem;
  }

  /* Reduce card hover effects on mobile */
  .box:hover {
    transform: none;
    box-shadow: var(--box-shadow);
  }

  /* Optimize calendar for mobile */
  .calendar-grid {
    gap: 0.125rem;
  }

  .calendar-day {
    font-size: 0.7rem;
    padding: 0;
  }

  /* Stack columns on mobile */
  .columns.is-multiline > .column {
    flex: none;
    width: 100%;
    padding: 0.25rem;
  }

  /* Reduce notification padding */
  .notification {
    padding: 0.5rem 0.75rem;
  }

  /* Optimize tabs for mobile */
  .tabs ul {
    flex-wrap: wrap;
  }

  .tabs li a {
    padding: 0.5em 0.75em;
    font-size: 0.875rem;
  }

  /* Reduce footer padding */
  .footer {
    padding: 1rem 0.5rem;
  }

  .footer .column {
    padding: 0.25rem;
  }

  /* Query page specific optimizations */
  .query-page-size .label {
    margin-right: 0.5rem;
    margin-bottom: 0;
  }

  .query-page-size .select {
    margin-right: 0.5rem;
  }

  /* Summary stats adjustments */
  .summary-stats .notification {
    padding: 0.5rem;
  }

  .summary-stats .title {
    font-size: 0.875rem;
  }

  .summary-stats .heading {
    font-size: 0.75rem;
  }
}

/* Extra small devices (phones, less than 480px) */
@media screen and (max-width: 480px) {
  .container {
    padding: 0 3px;
  }

  .box {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .table {
    font-size: 0.75rem;
  }

  .button {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  .input, .select select {
    padding: 0.25rem;
    font-size: 0.75rem;
  }

  .label {
    font-size: 0.75rem;
  }

  .notification .title {
    font-size: 0.875rem;
  }

  .notification .heading {
    font-size: 0.625rem;
  }

  h1.title {
    font-size: 1.25rem;
  }

  h2.subtitle {
    font-size: 1.125rem;
  }

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

  .chart-container {
    height: 150px !important;
  }

  /* Further compress query page elements */
  .query-page-size .label {
    font-size: 0.75rem;
    margin-right: 0.25rem;
  }

  .summary-stats .title {
    font-size: 0.75rem;
  }

  .summary-stats .heading {
    font-size: 0.625rem;
  }
}