:root{--bs-body-bg:#f7f8fa}
html,body{overflow-x:hidden}
body{background-color:var(--bs-body-bg)}
.navbar .navbar-brand{font-weight:600}
.page-actions .btn{white-space:nowrap}
.page-actions .btn i{margin-right:.25rem}

/* Docs layout */
.docs-toc{position:sticky; top:1rem}
.callout{border-left:4px solid #0d6efd; background:#f1f6ff; padding:.75rem; border-radius:.25rem}
.callout-warning{border-left-color:#ffc107; background:#fff8e1}
.callout-success{border-left-color:#20c997; background:#e9f9f3}
.card{border-radius: .5rem}
.table td,.table th{vertical-align: middle}
pre{white-space: pre-wrap}

/* Ensure white SVG logo is visible on white backgrounds */
/* Colorize monochrome SVG via CSS mask */
.logo-mask{
  display:block;
  max-width:100%;
  width:clamp(160px, 90vw, 420px);
  height:auto;
  aspect-ratio: 2048 / 230; /* maintain natural ratio */
  background-color:#202020;
  -webkit-mask: url('../logo.svg') no-repeat center / contain;
  mask: url('../logo.svg') no-repeat center / contain;
  overflow:hidden;
}

header .container{overflow-x:hidden}

/* Brand logo in navbar (white) */
.logo-brand{
  display:inline-block;
  width:140px; height:28px;
  background-color:#ffffff;
  -webkit-mask: url('../logo.svg') no-repeat left center / contain;
  mask: url('../logo.svg') no-repeat left center / contain;
}

/* Fixed width and ellipsis for Title filter */
#formTitleSelect + .select2{min-width:220px;max-width:220px}
#formTitleSelect + .select2 .select2-selection__rendered{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Truncate helper */
.truncate{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Prevent horizontal scrolling */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table td {
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 0;
  white-space: normal;
  padding: 0.4rem 0.6rem !important;
}

.table th {
  padding: 0.5rem 0.6rem !important;
}

.table td div {
  max-width: 100%;
}

/* Compact table rows */
.table.table-sm td {
  padding: 0.35rem 0.5rem !important;
  line-height: 1.3;
}

.table.table-sm th {
  padding: 0.4rem 0.5rem !important;
  line-height: 1.3;
}

/* Truncate text in cells */
.table td.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge styling */
.badge {
  white-space: nowrap;
  display: inline-block;
  padding: 0.3rem 0.5rem;
}

/* Prevent container overflow */
.container-xxl {
  overflow-x: hidden;
}

/* Mobile: submissions page spacing */
@media (max-width: 767.98px) {
  .container-xxl .btn{width:100%}
  .container-xxl .btn + .btn{margin-left:0}
}

/* Optimize table display */
.table-hover tbody tr:hover {
  background-color: rgba(0,0,0,0.02);
}

/* Better text rendering */
.table {
  font-size: 0.9rem;
}

/* Phone numbers monospace */
[style*="font-family: monospace"] {
  letter-spacing: 0.5px;
}

/* Readable, wrapping tooltips for truncated cells */
.tooltip .tooltip-inner{
  max-width: 60vw;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mobile adjustments */
@media (max-width: 767.98px) {
  /* Make Select2 take full width on phones */
  #formTitleSelect + .select2{min-width:100%;max-width:100%}

  /* Compact spacing */
  .lead-card .card-body{padding: .6rem .75rem !important}
  .lead-card .badge{font-size: .75rem}

  /* Prevent horizontal scroll in filters */
  form.row.g-2 .form-label{font-size:.875rem}
  form.row.g-2 .form-control, form.row.g-2 .form-select{font-size:.95rem}

  /* Ensure long words wrap */
  .text-break{word-break: break-word; overflow-wrap: anywhere}

  /* Export dropdown alignment fix */
  .export-dropdown .dropdown-menu{
    min-width: 12rem;
  }

  /* Mobile: form editor layout improvements */
  .mobile-sticky-actions{position:sticky;bottom:0;background:#fff;padding:.5rem;border-top:1px solid rgba(0,0,0,.1);z-index: 1020}
  .qr-dropdown .qr-menu{position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;width:100vw;max-height:70vh;overflow:auto;border-radius:12px 12px 0 0;transform:none !important;margin:0;padding-bottom:env(safe-area-inset-bottom, 16px)}
  .qr-dropdown .dropdown-menu .row{margin-left:0;margin-right:0}
}

/* Desktop: keep QR menu as regular dropdown */
@media (min-width: 768px) {
  .qr-dropdown .qr-menu{position:absolute !important; right:0; left:auto; bottom:auto; top:100%; width:460px; max-width:80vw; transform:translate3d(0, .5rem, 0)}
}

/* Preview area sizing: fill available space without inner scrollbars */
.preview-body{height:60vh; overflow:hidden}
.preview-frame{width:100%; height:100%; border:0}