/* OpenHub CRM - Global form layout hotfix
   Fixes overflowing forms on login, team, settings, password and admin pages.
*/

html,
body {
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Main content should not force horizontal overflow */
main,
.content,
.main-content,
.page-content,
.dashboard-content,
.content-wrapper,
.container {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Form cards and wrappers */
form,
form > div,
form section,
form fieldset,
form .card,
form .box,
form .panel,
form .form-card,
form [class*="card"],
form [class*="panel"],
form [style*="border"] {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Critical fix: labels and inputs must not sit in broken side-by-side rows */
form p,
form .form-row,
form .form-group,
form .field,
form .field-row,
form .input-row,
form [class*="form-row"],
form [class*="form-group"],
form [class*="field"] {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Make labels readable */
form label {
  display: block !important;
  max-width: 100% !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Make normal controls fit their container */
form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
form select,
form textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Checkboxes/radios must stay natural size */
form input[type="checkbox"],
form input[type="radio"] {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Help text and validation messages must wrap */
form small,
form .helptext,
form .errorlist,
form ul,
form li {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Fix grids inside forms */
form [style*="display:grid"],
form [style*="display: grid"],
form [style*="grid-template-columns"],
form .grid,
form .form-grid {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Desktop: safe two-column form layout */
@media (min-width: 901px) {
  form [style*="display:grid"],
  form [style*="display: grid"],
  form [style*="grid-template-columns"],
  form .grid,
  form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  /* Team Add is too dense; make that page one readable column */
  body:has([action*="/team/add"]) form [style*="display:grid"],
  body:has([action*="/team/add"]) form [style*="display: grid"],
  body:has([action*="/team/add"]) form [style*="grid-template-columns"],
  body:has([action*="/team/add"]) form .grid,
  body:has([action*="/team/add"]) form .form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile/tablet: always one column */
@media (max-width: 900px) {
  form [style*="display:grid"],
  form [style*="display: grid"],
  form [style*="grid-template-columns"],
  form .grid,
  form .form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Fix authentication/login form specifically */
body:has(form[action*="login"]) form,
body:has(input[name="username"]) form,
body:has(input[name="password"]) form {
  max-width: 100% !important;
}

body:has(form[action*="login"]) form p,
body:has(input[name="username"]) form p,
body:has(input[name="password"]) form p {
  display: block !important;
}

/* Fix Change Password page specifically */
body:has(input[name="old_password"]) form p,
body:has(input[name="new_password1"]) form p,
body:has(input[name="new_password2"]) form p {
  display: block !important;
}

/* Prevent long examples from creating tiny columns */
form p,
form div {
  overflow-wrap: anywhere;
}

/* Buttons */
form button,
form input[type="submit"],
form input[type="button"],
form a.btn,
form .btn {
  max-width: 100% !important;
  box-sizing: border-box !important;
}