/* Ajustes responsivos gerais do sistema QEstacionamento.
   Somente layout/usabilidade: não altera lógica, callbacks ou regras operacionais. */

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas {
  max-width: 100%;
}

.dash-table-container {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 768px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-fluid {
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .op-main-title {
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
  }

  .op-panel-title,
  .modal-title {
    font-size: clamp(1.05rem, 5vw, 1.25rem) !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }

  .op-action-card,
  .card {
    border-radius: 14px !important;
  }

  .card-body {
    padding: 1rem !important;
  }

  label,
  .form-label,
  .fw-semibold {
    font-size: 0.94rem;
  }

  .form-control,
  .form-select,
  textarea.form-control {
    min-height: 44px;
    font-size: 16px;
  }

  .btn {
    min-height: 44px;
    white-space: normal;
    line-height: 1.2;
  }

  .input-group {
    gap: 6px;
  }

  .input-group > .form-control,
  .input-group > .form-select {
    flex: 1 1 100% !important;
    width: 100% !important;
    border-radius: 0.5rem !important;
  }

  .input-group > .btn {
    flex: 1 1 calc(50% - 6px) !important;
    border-radius: 0.5rem !important;
  }

  .op-mobile-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .op-mobile-actions .btn {
    width: 100%;
    text-align: center;
  }

  .dash-table-container .dash-spreadsheet-container,
  .dash-spreadsheet-container {
    overflow-x: auto !important;
  }

  .dash-table-container .dash-cell,
  .dash-table-container .dash-header {
    font-size: 12px !important;
    padding: 8px !important;
  }

  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }

  .modal-body {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }

  #op-saida-qr-video {
    min-height: 220px !important;
    max-height: 52vh !important;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  .btn.w-100,
  .d-grid .btn {
    min-height: 48px;
  }

  .input-group > .btn {
    flex-basis: 100% !important;
  }

  .alert {
    padding: 0.65rem 0.75rem;
    font-size: 0.92rem;
  }

  .modal-footer {
    gap: 8px;
  }

  .modal-footer .btn {
    flex: 1 1 100%;
  }
}