/* Event Country admin responsive and interaction hardening. */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; }
body { overflow-x: hidden; }

button,
.btn,
[role="button"],
input[type="button"],
input[type="submit"] {
  min-height: 42px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 15px;
  border-radius: 11px;
}

.btn-sm,
button.btn-sm { min-height: 36px; padding: 8px 11px; }

.modal-root { padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
.modal {
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}
.modal-header { flex: 0 0 auto; }
.modal-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #e8edf3;
}

.modal-actions > * { flex: 0 1 auto; }
.table-wrap,
[class*="table-wrap"],
.fin-table-wrap {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
table { max-width: 100%; }
th, td { overflow-wrap: anywhere; }

img.ec-admin-image-fallback {
  object-fit: contain !important;
  padding: 12px;
  background: linear-gradient(145deg, #fff8f3, #eef2f6);
}

.company-chat-float {
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 900px) {
  .app-shell,
  .main-content,
  main,
  .view,
  [id$="-view"] { min-width: 0; max-width: 100%; }

  .form-grid,
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr !important; }

  .modal-actions > .btn,
  .modal-actions > button { flex: 1 1 150px; }
}

@media (max-width: 560px) {
  .modal-root { padding: 0; align-items: stretch; }
  .modal {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .modal-header,
  .modal-body,
  .modal-actions { padding-left: 16px !important; padding-right: 16px !important; }
  .modal-actions > * { flex: 1 1 100%; width: 100%; }
  .company-chat-panel {
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }
}