wekan/client/components/boards/boardHeader.css

.integration-form {
  padding: 0.7vh 0.7vw;
  border-bottom: 1px solid #ccc;
}
.flex,
.option {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
.option {
  -webkit-border-radius: 0.4vw;
  border-radius: 0.4vw;
  background: #fff;
  text-decoration: none;
  -webkit-box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
  box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
  margin-top: 0.7vh;
  padding: 0.7vh 0.7vw;
}

/* Zoom and Mobile Mode Controls */
.board-header-btns.center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5vh 1vw;
  border-radius: 0.5vw;
  box-shadow: 0 0.2vh 0.5vh rgba(0,0,0,0.1);
}

.zoom-controls .board-header-btn {
  padding: 0.5vh 0.8vw !important;
  border-radius: 0.3vw !important;
  background: #fff !important;
  border: 1px solid #000 !important;
  transition: all 0.2s ease !important;
  color: #000 !important;
  height: auto !important;
  line-height: normal !important;
  margin: 0 !important;
  float: none !important;
  overflow: visible !important;
}

.zoom-controls .board-header-btn i {
  color: #000 !important;
  float: none !important;
  display: inline !important;
  line-height: normal !important;
  margin: 0 !important;
}

.zoom-controls .board-header-btn:hover {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

.zoom-controls .board-header-btn:hover i {
  color: #fff !important;
}

.zoom-controls .board-header-btn.is-active {
  background: #0079bf;
  color: white;
  border-color: #005a8a;
}

.zoom-controls .board-header-btn.is-active i {
  color: white;
}

.zoom-level {
  font-weight: bold;
  color: #333;
  min-width: 3vw;
  text-align: center;
  font-size: clamp(12px, 2vw, 14px);
  cursor: pointer;
  padding: 0.3vh 0.5vw;
  border-radius: 0.3vw;
  transition: all 0.2s ease;
}

.zoom-level:hover {
  background: #f0f0f0;
  color: #000;
}

/* Mobile Mode Styles */
.mobile-mode .board-wrapper {
  width: 100%;
  height: 100%;
}

.mobile-mode .board-canvas {
  height: 100%;
}

.mobile-mode .minicard {
  font-size: clamp(16px, 4vw, 20px);
  padding: 1.2vh 1.5vw 0.5vh;
  min-height: 3vh;
}

.mobile-mode .list-header-name {
  font-size: clamp(18px, 4.5vw, 24px);
}

.mobile-mode .board-header-btn {
  padding: 1vh 1.5vw;
  font-size: clamp(14px, 3.5vw, 18px);
}

.mobile-mode .zoom-controls {
  padding: 1vh 1.5vw;
  gap: 1vw;
}

.mobile-mode .zoom-controls .board-header-btn {
  padding: 1vh 1.5vw !important;
  font-size: clamp(14px, 3.5vw, 18px) !important;
  background: #fff !important;
  border: 1px solid #000 !important;
  color: #000 !important;
  height: auto !important;
  line-height: normal !important;
  margin: 0 !important;
  float: none !important;
  overflow: visible !important;
}

.mobile-mode .zoom-controls .board-header-btn i {
  color: #000 !important;
  float: none !important;
  display: inline !important;
  line-height: normal !important;
  margin: 0 !important;
}

.mobile-mode .zoom-controls .board-header-btn:hover {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

.mobile-mode .zoom-controls .board-header-btn:hover i {
  color: #fff !important;
}

.mobile-mode .zoom-level {
  font-size: clamp(14px, 3.5vw, 18px);
  min-width: 4vw;
}

/* Comprehensive Mobile Mode Styles - Works on all screen sizes */
.mobile-mode .board-wrapper {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-origin: initial !important;
  max-width: 100% !important;
}

.mobile-mode .board-canvas {
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

.mobile-mode .swimlane {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 2rem !important;
  display: block !important;
  float: none !important;
}

.mobile-mode .swimlane-header {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(18px, 2.5vw, 32px) !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

.mobile-mode .list {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
  margin-bottom: 2rem !important;
  border-left: none !important;
  border-bottom: 2px solid #ccc !important;
  clear: both !important;
}

.mobile-mode .list-header {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  padding: 1rem !important;
  font-size: clamp(18px, 2.5vw, 32px) !important;
  display: grid !important;
  grid-template-columns: 30px 1fr auto auto !important;
  gap: 10px !important;
  align-items: center !important;
  position: relative !important;
}

.mobile-mode .list-header .list-header-name {
  font-size: clamp(18px, 2.5vw, 32px) !important;
  font-weight: bold !important;
  grid-row: 1 !important;
  grid-column: 2 !important;
  align-self: end !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-mode .list-header .cardCount {
  font-size: clamp(14px, 2vw, 24px) !important;
  grid-row: 2 !important;
  grid-column: 2 !important;
  align-self: start !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-mode .list-header .list-header-menu-icon {
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  grid-row: 1/3 !important;
  grid-column: 3 !important;
  padding: 14px !important;
  font-size: clamp(24px, 3vw, 48px) !important;
  text-align: center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-mode .list-header .list-header-handle {
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  grid-row: 1/3 !important;
  grid-column: 4 !important;
  padding: 14px !important;
  font-size: clamp(28px, 3.5vw, 56px) !important;
  text-align: center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-mode .list-body {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  padding: 1rem !important;
  display: block !important;
}

.mobile-mode .minicard {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(16px, 2vw, 24px) !important;
  padding: 1.2vh 1.5vw 0.5vh !important;
  min-height: 3vh !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
  float: none !important;
}

.mobile-mode .minicard .minicard-title {
  font-size: clamp(16px, 2vw, 24px) !important;
  font-weight: bold !important;
}

.mobile-mode .minicard .minicard-members {
  font-size: clamp(12px, 1.5vw, 18px) !important;
}

.mobile-mode .minicard .minicard-lists {
  font-size: clamp(12px, 1.5vw, 18px) !important;
}

/* Desktop Mode Styles */
.desktop-mode .board-wrapper {
  width: auto !important;
  height: auto !important;
}

.desktop-mode .swimlane {
  width: auto !important;
  min-width: auto !important;
}

.desktop-mode .list {
  width: auto !important;
  min-width: auto !important;
  display: flex !important;
  float: left !important;
  margin-bottom: 0 !important;
  border-left: 1px solid #ccc !important;
  border-bottom: none !important;
}

.desktop-mode .list-header {
  width: auto !important;
  min-width: auto !important;
  padding: 2.5vh 1.5vw 0.5vh !important;
  font-size: clamp(14px, 3vw, 18px) !important;
  display: block !important;
}

.desktop-mode .list-header .list-header-name {
  font-size: clamp(14px, 3vw, 18px) !important;
  display: inline !important;
  grid-row: auto !important;
  grid-column: auto !important;
  align-self: auto !important;
}

.desktop-mode .list-header .cardCount {
  font-size: 12px !important;
  grid-row: auto !important;
  grid-column: auto !important;
  align-self: auto !important;
}

.desktop-mode .list-header .list-header-menu-icon {
  position: absolute !important;
  right: 60px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  grid-row: auto !important;
  grid-column: auto !important;
  padding: 14px !important;
  font-size: 40px !important;
}

.desktop-mode .list-header .list-header-handle {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  grid-row: auto !important;
  grid-column: auto !important;
  padding: 7px !important;
  font-size: clamp(16px, 3vw, 20px) !important;
}

.desktop-mode .list-body {
  width: auto !important;
  min-width: auto !important;
  padding: 5px 11px !important;
}

.desktop-mode .minicard {
  width: auto !important;
  min-width: auto !important;
  font-size: clamp(12px, 2.5vw, 16px) !important;
  padding: 0.5vh 0.8vw !important;
  min-height: auto !important;
  margin-bottom: 9px !important;
}

.desktop-mode .minicard .minicard-title {
  font-size: clamp(12px, 2.5vw, 16px) !important;
}

.desktop-mode .minicard .minicard-members {
  font-size: 10px !important;
}

.desktop-mode .minicard .minicard-lists {
  font-size: 10px !important;
}

/* Additional Mobile Mode Styles for Other Elements - Works on all screen sizes */
.mobile-mode .swimlane-header .swimlane-title {
  font-size: clamp(18px, 2.5vw, 32px) !important;
  font-weight: bold !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-mode .swimlane-header .swimlane-description {
  font-size: clamp(14px, 2vw, 24px) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-mode .board-header {
  font-size: clamp(18px, 2.5vw, 32px) !important;
  padding: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

.mobile-mode .board-header .board-header-title {
  font-size: clamp(18px, 2.5vw, 32px) !important;
  font-weight: bold !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-mode .board-header .board-header-description {
  font-size: clamp(14px, 2vw, 24px) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-mode .board-header .board-header-btn {
  font-size: clamp(14px, 2vw, 24px) !important;
  padding: 1vh 1.5vw !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-mode .board-header .board-header-btn i {
  font-size: clamp(14px, 2vw, 24px) !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force mobile mode visibility on all screen sizes */
.mobile-mode .list-header .fa-angle-right,
.mobile-mode .list-header .fa-arrows {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}

.mobile-mode .list-header .fa-angle-right {
  grid-row: 1/3 !important;
  grid-column: 3 !important;
  padding: 14px !important;
  font-size: clamp(24px, 3vw, 48px) !important;
  text-align: center !important;
}

.mobile-mode .list-header .fa-arrows {
  grid-row: 1/3 !important;
  grid-column: 4 !important;
  padding: 14px !important;
  font-size: clamp(28px, 3.5vw, 56px) !important;
  text-align: center !important;
}

/* Override any media queries that might hide elements in mobile mode */
.mobile-mode * {
  max-width: none !important;
}

.mobile-mode .list,
.mobile-mode .swimlane,
.mobile-mode .board-wrapper,
.mobile-mode .board-canvas {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 100% !important;
}

/* Force mobile mode list styling on all screen sizes - override desktop CSS */
.mobile-mode .board-canvas {
  display: block !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

  .mobile-mode .swimlane {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
  }

  .mobile-mode .swimlane .swimlane-header {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 0 1rem 0 !important;
    padding: 1rem !important;
    font-size: clamp(18px, 2.5vw, 32px) !important;
    font-weight: bold !important;
    border-bottom: 2px solid #ccc !important;
  }

  .mobile-mode .swimlane .lists {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .mobile-mode .list {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 2px solid #ccc !important;
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

.mobile-mode .list:first-child {
  margin-left: 0 !important;
  margin-top: 0 !important;
}

.mobile-mode .list:last-child {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.mobile-mode .list.ui-sortable-helper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: 60px !important;
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 2px solid #ccc !important;
  flex: none !important;
}

.mobile-mode .list.placeholder {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: 60px !important;
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 2px solid #ccc !important;
  flex: none !important;
}

/* Override any existing responsive CSS that might interfere with mobile mode */
.mobile-mode .board-canvas .swimlane .lists {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

.mobile-mode .board-canvas .swimlane .lists .list {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 2px solid #ccc !important;
  flex: none !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Force mobile mode to override any media query styles */
@media screen and (min-width: 801px) {
  .mobile-mode .board-canvas {
    display: block !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .mobile-mode .swimlane {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
  }

  .mobile-mode .swimlane .lists {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .mobile-mode .list {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 2px solid #ccc !important;
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
}

/* Hide desktop-only elements in mobile mode (like mobile media queries do) */
.mobile-mode .board-header-btn i.fa + span {
  display: none !important;
}

.mobile-mode .board-header-btn span {
  display: none !important;
}

.mobile-mode .board-header-btn .fa + span {
  display: none !important;
}

.mobile-mode .board-header-btn .fa + .board-header-btn-text {
  display: none !important;
}

.mobile-mode .board-header-btn .fa + .board-header-btn-label {
  display: none !important;
}

/* Show only icons in mobile mode */
.mobile-mode .board-header-btn {
  width: auto !important;
  min-width: auto !important;
  padding: 8px !important;
  text-align: center !important;
}

.mobile-mode .board-header-btn i {
  display: inline-block !important;
  margin: 0 !important;
}

/* Hide desktop-specific elements that shouldn't show in mobile mode */
.mobile-mode .desktop-only,
.mobile-mode .board-header .desktop-only {
  display: none !important;
}

.mobile-mode .board-header .board-header-btn.desktop-only {
  display: none !important;
}

/* Hide desktop-specific board header buttons in mobile mode */
.mobile-mode .board-header-btns.left {
  display: none !important;
}

.mobile-mode .board-header-btns.center {
  display: none !important;
}

/* Show only the right section buttons in mobile mode, but hide text labels */
.mobile-mode .board-header-btns.right {
  display: block !important;
}

.mobile-mode .board-header-btns.right .board-header-btn span {
  display: none !important;
}

.mobile-mode .board-header-btns.right .board-header-btn .fa + span {
  display: none !important;
}

.mobile-mode .board-header-btns.right .board-header-btn .fa + .board-header-btn-text {
  display: none !important;
}

.mobile-mode .board-header-btns.right .board-header-btn .fa + .board-header-btn-label {
  display: none !important;
}

/* Hide specific desktop-only buttons that shouldn't show in mobile mode */
.mobile-mode .board-header-btn.js-star-board span,
.mobile-mode .board-header-btn.js-change-visibility span,
.mobile-mode .board-header-btn.js-watch-board span,
.mobile-mode .board-header-btn.js-sort-cards span {
  display: none !important;
}

/* Show only icons for mobile mode buttons */
.mobile-mode .board-header-btns.right .board-header-btn {
  width: auto !important;
  min-width: auto !important;
  padding: 8px !important;
  text-align: center !important;
  margin: 0 2px !important;
}

.mobile-mode .board-header-btns.right .board-header-btn i {
  display: inline-block !important;
  margin: 0 !important;
}

/* Ensure mobile mode looks like small screen mobile view */
.mobile-mode .board-header {
  height: 40px !important;
}

.mobile-mode .board-header .board-header-btns {
  margin-top: 0px !important;
}

.mobile-mode .board-header .board-header-btn {
  height: 32px !important;
  line-height: 32px !important;
  font-size: 15px !important;
}

.mobile-mode .board-header .board-header-btn i.fa {
  line-height: 32px !important;
}

/* Copy mobile media query styles to mobile mode for consistent appearance */
.mobile-mode .board-header {
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mobile-mode .board-header .board-header-btns {
  margin-top: 0px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.mobile-mode .board-header .board-header-btn {
  height: 32px !important;
  line-height: 32px !important;
  font-size: 15px !important;
  margin: 0 2px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  width: auto !important;
}

.mobile-mode .board-header .board-header-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.mobile-mode .board-header .board-header-btn i.fa {
  line-height: 32px !important;
  font-size: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-mode .board-header .board-header-btn i.fa + span {
  display: none !important;
}

.mobile-mode .board-header .board-header-btn span {
  display: none !important;
}

/* Hide the board title in mobile mode to match mobile view */
.mobile-mode .header-board-menu {
  display: none !important;
}

/* Ensure the board header takes full width in mobile mode */
.mobile-mode .board-header {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 10px !important;
}

/* Additional Desktop Mode Styles for Other Elements */
.desktop-mode .swimlane-header .swimlane-title {
  font-size: clamp(14px, 3vw, 18px) !important;
}

.desktop-mode .swimlane-header .swimlane-description {
  font-size: 12px !important;
}

.desktop-mode .board-header {
  font-size: clamp(14px, 3vw, 18px) !important;
  padding: 2.5vh 1.5vw 0.5vh !important;
}

.desktop-mode .board-header .board-header-title {
  font-size: clamp(14px, 3vw, 18px) !important;
}

.desktop-mode .board-header .board-header-description {
  font-size: 12px !important;
}

.desktop-mode .board-header .board-header-btn {
  font-size: clamp(12px, 2.5vw, 16px) !important;
  padding: 0.5vh 0.8vw !important;
}

.desktop-mode .board-header .board-header-btn i {
  font-size: clamp(12px, 2.5vw, 16px) !important;
}