/* Mobile-only authentication layout. */
@media (max-width: 768px) {
  html,
  body,
  .shell {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .auth-layout {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    min-width: 0;
    margin: 0 auto;
    padding: max(16px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  }

  .auth-brand {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    min-width: 0;
    margin-bottom: 16px;
    padding: 0;
  }

  .auth-brand .brand-logo {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    min-width: 0;
    margin: 0;
  }

  .auth-brand h1 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    font-size: 26px;
    line-height: 1.1;
  }

  .auth-brand p {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
  }

  .auth-panels,
  .auth-panels .panel,
  .auth-panels form {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }

  .auth-panels .panel {
    padding: 20px 16px;
  }

  .auth-panels input,
  .auth-panels select,
  .auth-panels textarea,
  .auth-panels .button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }

  .auth-panels .button,
  .auth-panels button:not(.rc-password-toggle):not(.rc-password-field__toggle) {
    min-height: 44px;
  }

  .auth-register-block {
    display: grid;
    gap: 6px;
    width: 100%;
  }

  .auth-register-hint {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .auth-panels .legal-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 20px;
  }

  .auth-panels .legal-checkbox input {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    flex: 0 0 18px;
    margin: 1px 0 0;
  }

  .auth-panels .legal-checkbox span {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Финальные мобильные правила: список исполнителей всегда ровной колонкой. */
@media (max-width: 768px) {
  .supply-home-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .supply-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #supplyNotifyForm {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  #supplyNotifyForm > div:first-child,
  #supplyNotifyForm > label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #supplyNotifyForm h2,
  #supplyNotifyForm p {
    margin: 0 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #supplyNotifyForm select,
  #supplyNotifyForm textarea,
  #supplyNotifyForm button {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .employee-picker-options,
  .assignment-member-options,
  .meeting-participant-options {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .employee-picker-choice,
  .assignment-member-choice,
  .meeting-participant-choice {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
  }

  .employee-picker-choice input[type="checkbox"],
  .assignment-member-choice input[type="checkbox"],
  .meeting-participant-choice input[type="checkbox"] {
    position: static !important;
    inset: auto !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  .employee-picker-choice > span,
  .assignment-member-choice > span,
  .meeting-participant-choice > span,
  .employee-picker-text {
    display: grid !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .employee-picker-choice strong,
  .assignment-member-choice strong,
  .meeting-participant-choice strong,
  .employee-picker-choice small,
  .assignment-member-choice small,
  .meeting-participant-choice small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 768px) {
  .supply-home-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .supply-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #supplyNotifyForm {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  #supplyNotifyForm > div:first-child,
  #supplyNotifyForm > label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #supplyNotifyForm h2,
  #supplyNotifyForm p {
    margin: 0 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #supplyNotifyForm select,
  #supplyNotifyForm textarea,
  #supplyNotifyForm button {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Shell states must never render together. */
#authView.hidden,
#appView.hidden {
  display: none !important;
}

/* Restaurant mobile menu: horizontal brand followed by the section picker. */
@media (max-width: 768px) {
  #appView .sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  #appView .sidebar-brand {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 3px;
    align-items: center;
    min-width: 0;
    padding: 0;
  }

  #appView .sidebar-brand .sidebar-logo {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    margin: 0;
  }

  #appView .sidebar-brand strong {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: 24px;
    line-height: 1.05;
  }

  #appView .sidebar-brand span {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
  }

  #appView .mobile-menu-label {
    display: grid;
    grid-column: 1;
    gap: 3px;
    width: 100%;
    margin: 0;
  }

  #appView .mobile-tab-select {
    width: 100%;
    min-height: 54px;
  }
}

/* Final mobile header layout for both authentication and restaurant screens. */
@media (max-width: 768px) {
  #authView .auth-brand {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: center !important;
    width: 100% !important;
  }

  #authView .auth-brand .brand-logo {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 56px !important;
    height: 56px !important;
  }

  #authView .auth-brand h1 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
  }

  #authView .auth-brand p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  #appView .sidebar-brand {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 3px !important;
    align-items: center !important;
    width: 100% !important;
  }

  #appView .sidebar-brand .sidebar-logo {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 56px !important;
    height: 56px !important;
  }

  #appView .sidebar-brand strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  #appView .sidebar-brand span {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }

  #appView .mobile-menu-label {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* Keep the restaurant section picker below the brand on phones. */
@media (max-width: 768px) {
  #appView .sidebar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  #appView .sidebar-brand {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  #appView .mobile-menu-label {
    display: grid !important;
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #appView .mobile-tab-select {
    width: 100% !important;
  }
}

/* Vertically center the restaurant title and role against its logo. */
@media (max-width: 768px) {
  #appView .sidebar-brand > .sidebar-brand-text,
  #appView .sidebar-brand > div {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: center !important;
    min-width: 0 !important;
    min-height: 56px !important;
    gap: 2px !important;
  }

  #appView .sidebar-brand strong,
  #appView .sidebar-brand #sidebarRole,
  #appView .sidebar-brand .organization-support-id {
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #appView .sidebar-brand > .sidebar-brand-text,
  #appView .sidebar-brand > div {
    overflow: visible !important;
    min-height: auto !important;
  }

  #appView .sidebar-brand .organization-support-id {
    color: #0b6fe8 !important;
    font-weight: 700 !important;
  }

  #appView .sidebar-brand .organization-support-id.hidden {
    display: none !important;
  }
}

/* Keep the restaurant app shell in mobile flow after every screen render. */
@media (max-width: 768px) {
  #appView.app-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  #appView .sidebar {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #appView .workspace {
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Never leave fixed app navigation visible on authentication screens.
   Beat hotfix `#mobileBottomNav.rc-mobile-bottom-nav { display:grid !important }`. */
#appView.hidden .mobile-bottom-nav,
#appView.hidden #mobileBottomNav,
#mobileBottomNav.hidden,
#mobileBottomNav.mobile-bottom-nav.hidden,
#mobileBottomNav.rc-mobile-bottom-nav.hidden,
#mobileBottomNav:empty,
.mobile-bottom-nav.hidden,
.rc-mobile-bottom-nav.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the bottom dock viewport-bound (no translateX — breaks with transformed ancestors). */
@media (max-width: 760px) {
  #mobileBottomNav.mobile-bottom-nav,
  #mobileBottomNav.mobile-bottom-nav.mobile-bottom-nav-manager,
  #mobileBottomNav.rc-mobile-bottom-nav {
    position: fixed !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* Компактное основное меню для телефонов: вместо системного полноэкранного
   select Android используется закрытая кнопка с прокручиваемым списком разделов. */
.mobile-sections { display: none; }

#appView .dlc-totals-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px;
}

#appView .dlc-totals-grid .metric {
  min-height: 62px;
  padding: 10px;
}

#appView .dlc-totals-grid .metric strong {
  font-size: clamp(18px, 5vw, 24px);
}

#appView .dlc-totals-grid .metric span {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.2;
}

#appView .guest-feedback-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#appView .guest-feedback-metrics .metric {
  min-height: 62px;
  padding: 10px;
}

#appView .guest-feedback-metrics .metric strong {
  font-size: clamp(18px, 5vw, 24px);
}

#appView .guest-feedback-metrics .metric span {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.2;
}

#appView #warningMetrics.warning-stat-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#appView #warningMetrics.warning-stat-cards.warning-stat-cards--self {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#appView #warningMetrics .warning-stat-card {
  max-width: 76px;
}

#appView #warningMetrics .warning-stat-card__face strong {
  font-size: clamp(18px, 6vw, 26px);
}

#appView #warningMetrics .warning-stat-card span {
  font-size: 11px;
}

.shift-block-items {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.shift-block-items li {
  padding: 6px 8px;
  border-left: 3px solid var(--primary, #0a84ff);
  background: #f5f8fc;
  line-height: 1.3;
}

@media (max-width: 768px) {
  #appView .mobile-menu-label,
  #appView .tabs {
    display: none !important;
  }

  #appView .mobile-sections {
    display: block !important;
    width: 100%;
    border: 1px solid rgba(196, 202, 212, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    overflow: hidden;
  }

  #appView .mobile-sections summary {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    color: #22272f;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

  #appView .mobile-sections summary::-webkit-details-marker { display: none; }
  #appView .mobile-sections summary::after { content: "⌄"; font-size: 18px; }
  #appView .mobile-sections[open] summary::after { content: "⌃"; }

  #appView .mobile-sections-list {
    display: grid;
    max-height: min(62dvh, 560px);
    gap: 6px;
    overflow-y: auto;
    border-top: 1px solid rgba(196, 202, 212, 0.72);
    padding: 5px 12px;
  }

  #appView .mobile-sections-list section { display: grid; gap: 0; }
  #appView .mobile-sections-list section + section { border-top: 1px solid rgba(196, 202, 212, 0.58); padding-top: 4px; }
  #appView .mobile-sections-list section > strong,
  #appView .mobile-sections-list .mobile-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 32px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: #707783;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  #appView #sidebarCollapseButton,
  #appView .sidebar-collapse-button {
    display: none !important;
  }
  #appView .mobile-sections-list section > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  #appView .mobile-sections-list button {
    width: 100%;
    min-height: 26px;
    padding: 3px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #2b313a;
    font: inherit;
    font-size: 13px;
    text-align: left;
  }


  /* Исполнители и участники всегда идут одной колонкой — без наложения текста. */
  .employee-picker-options,
  .assignment-member-options,
  .meeting-participant-options {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .employee-picker-choice,
  .assignment-member-choice,
  .meeting-participant-choice {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Длинные действия склада не должны сжиматься или переноситься по буквам. */
  .supply-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .supply-nav-grid .button,
  .supply-home-panel .button,
  .supplies-page .wide-button {
    min-width: 0 !important;
    height: auto !important;
    min-height: 46px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .supply-home-grid,
  .supply-main-grid,
  .supply-operations-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #supplyNotifyForm {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #supplyNotifyForm > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  #supplyNotifyForm h2,
  #supplyNotifyForm p {
    min-width: 0 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #supplyNotifyForm > * {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #supplyNotifyForm > label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    line-height: 1.25 !important;
  }

  #supplyNotifyForm select,
  #supplyNotifyForm textarea,
  #supplyNotifyForm button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* Hidden application shell must always win over mobile layout rules. */
#appView.app-layout.hidden { display: none !important; }

/* Auth and app shells are mutually exclusive on mobile. */
@media (max-width: 768px) {
  #authView:not(.hidden) ~ #appView { display: none !important; }
}

/* Consent labels must stay in two columns when their legal text wraps. */
@media (max-width: 768px) {
  label.checkbox {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  label.checkbox > input[type="checkbox"] {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: start !important;
  }

  label.checkbox > span {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
  }
}

/* Protect restaurant mobile brand from hotfix overrides. */
@media (max-width: 768px) {
  #appView button.sidebar-brand,
  #appView button.sidebar-brand.rc-horizontal-brand,
  #appView button.sidebar-brand.rc-app-brand-row {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 3px !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
    flex-direction: unset !important;
  }

  #appView button.sidebar-brand > div,
  #appView button.sidebar-brand .rc-brand-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    min-width: 0 !important;
    min-height: 56px !important;
    gap: 3px !important;
  }

  #appView button.sidebar-brand strong,
  #appView button.sidebar-brand span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #appView button.sidebar-brand strong {
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  #appView button.sidebar-brand span {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  #appView button.sidebar-brand .sidebar-logo,
  #appView button.sidebar-brand .rc-brand-logo {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    flex: 0 0 56px !important;
  }
}

/* Highest-priority mobile auth layout: protect it from generic form hotfixes. */
@media (max-width: 768px) {
  #authView.auth-layout .auth-brand {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #authView.auth-layout .auth-brand > img.brand-logo {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    object-fit: cover !important;
  }

  #authView.auth-layout .auth-brand > h1,
  #authView.auth-layout .auth-brand > p {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #authView.auth-layout .auth-brand > h1 {
    grid-row: 1 !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
  }

  #authView.auth-layout .auth-brand > p {
    grid-row: 2 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  #authView .auth-panels label.checkbox.legal-checkbox,
  #appView #memberPolicyField {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  #authView .auth-panels label.checkbox.legal-checkbox > input[type="checkbox"],
  #appView #memberPolicyField > input[type="checkbox"] {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: start !important;
  }

  #authView .auth-panels label.checkbox.legal-checkbox > span,
  #appView #memberPolicyField > span {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
  }

  #authView .auth-panels label.checkbox.register-owner-manager {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 20px !important;
    height: auto !important;
    padding: 0 !important;
  }

  #authView .auth-panels .register-owner-manager > input[type="checkbox"] {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    flex: 0 0 20px !important;
    align-self: center !important;
  }

  #authView .auth-panels .register-owner-manager__text {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    line-height: 1.25 !important;
  }

  #authView .auth-panels .register-owner-manager__info {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    flex: 0 0 18px !important;
    background: transparent !important;
    color: #e11d2e !important;
  }

  #authView .auth-panels .register-owner-manager__info svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
  }

  #authView .auth-panels .register-owner-manager__tip {
    position: static !important;
    left: auto !important;
    top: auto !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1 !important;
  }
}

@media (max-width: 768px) {
  .employee-picker-options,
  .assignment-member-options,
  .meeting-participant-options {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .employee-picker-choice,
  .assignment-member-choice,
  .meeting-participant-choice {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
  }

  .employee-picker-choice input[type="checkbox"],
  .assignment-member-choice input[type="checkbox"],
  .meeting-participant-choice input[type="checkbox"] {
    position: static !important;
    inset: auto !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  .employee-picker-choice > span,
  .assignment-member-choice > span,
  .meeting-participant-choice > span,
  .employee-picker-text {
    display: grid !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .employee-picker-choice strong,
  .assignment-member-choice strong,
  .meeting-participant-choice strong,
  .employee-picker-choice small,
  .assignment-member-choice small,
  .meeting-participant-choice small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}


#tab-warnings.warnings-employee-view #warningsFilterForm,
#tab-warnings.warnings-employee-view form#warningsFilterForm,
#tab-warnings.warnings-employee-view #warningsFilterForm.warnings-filter-form,
#tab-warnings.warnings-employee-view #warningsFilterForm.form-grid-4 {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}